diff --git a/src-docs/src/views/bottom_bar/bottom_bar_displacement.js b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js
index 9e46319df1b..2ad3e2f47bd 100644
--- a/src-docs/src/views/bottom_bar/bottom_bar_displacement.js
+++ b/src-docs/src/views/bottom_bar/bottom_bar_displacement.js
@@ -37,24 +37,9 @@ export default () => {
         onChange={(id) => onChange(id)}
       />
 
-      {toggleIdSelected === 'bottomBarStandard' && (
-        <EuiBottomBar>
-          <EuiFlexGroup justifyContent="flexEnd">
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                onClick={() => setToggleIdSelected(null)}
-                color="ghost"
-                size="s"
-                iconType="cross">
-                close
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiBottomBar>
-      )}
-
-      {toggleIdSelected === 'bottomBarWithoutAffordForDisplacement' && (
-        <EuiBottomBar affordForDisplacement={false}>
+      {toggleIdSelected && (
+        <EuiBottomBar
+          affordForDisplacement={toggleIdSelected === 'bottomBarStandard'}>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx
index d059be649a6..85565349d26 100644
--- a/src/components/bottom_bar/bottom_bar.tsx
+++ b/src/components/bottom_bar/bottom_bar.tsx
@@ -78,6 +78,28 @@ export class EuiBottomBar extends Component<Props> {
     }
   }
 
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.affordForDisplacement !== this.props.affordForDisplacement) {
+      if (this.props.affordForDisplacement) {
+        // start affording for displacement
+        const height = this.bar ? this.bar.clientHeight : -1;
+        document.body.style.paddingBottom = `${height}px`;
+      } else {
+        // stop affording for displacement
+        document.body.style.paddingBottom = '';
+      }
+    }
+
+    if (prevProps.bodyClassName !== this.props.bodyClassName) {
+      if (prevProps.bodyClassName) {
+        document.body.classList.remove(prevProps.bodyClassName);
+      }
+      if (this.props.bodyClassName) {
+        document.body.classList.add(this.props.bodyClassName);
+      }
+    }
+  }
+
   componentWillUnmount() {
     if (this.props.affordForDisplacement) {
       document.body.style.paddingBottom = '';
@@ -95,7 +117,7 @@ export class EuiBottomBar extends Component<Props> {
       paddingSize,
       bodyClassName,
       landmarkHeading,
-      affordForDisplacement, // eslint-disable-line no-unused-vars
+      affordForDisplacement,
       ...rest
     } = this.props;