Adding padding-bottom to a page where all elements are positioned absolutely












0















So i have this HTML page where there are 3 main elements, a side navigation bar, a header, and a data section, which for some reason are all positioned absolutely. Briefly it looks something like this:






html{
height: 100%;
}
body{
height: 100%;
}
header{
position: absolute;
width: 100%;
height: 144px;
top: 0;
}
.data {
position: absolute;
width: 100%;
min-height: calc(100vh - 192px);
top: 168px;
}

<html>
<head></head>
<body>
<header></header>
<div class="data"><div>
</body>
</html>





Where i need 24px of margin between header and .data and between data and the bottom of the page. It works fine until i insert more content into .data so that it stretches beyond the min-height specified. So i lose the bottom margin of the page. I tried adding content with :after but it didn't work. Any suggestions?
Cheers.










share|improve this question



























    0















    So i have this HTML page where there are 3 main elements, a side navigation bar, a header, and a data section, which for some reason are all positioned absolutely. Briefly it looks something like this:






    html{
    height: 100%;
    }
    body{
    height: 100%;
    }
    header{
    position: absolute;
    width: 100%;
    height: 144px;
    top: 0;
    }
    .data {
    position: absolute;
    width: 100%;
    min-height: calc(100vh - 192px);
    top: 168px;
    }

    <html>
    <head></head>
    <body>
    <header></header>
    <div class="data"><div>
    </body>
    </html>





    Where i need 24px of margin between header and .data and between data and the bottom of the page. It works fine until i insert more content into .data so that it stretches beyond the min-height specified. So i lose the bottom margin of the page. I tried adding content with :after but it didn't work. Any suggestions?
    Cheers.










    share|improve this question

























      0












      0








      0


      0






      So i have this HTML page where there are 3 main elements, a side navigation bar, a header, and a data section, which for some reason are all positioned absolutely. Briefly it looks something like this:






      html{
      height: 100%;
      }
      body{
      height: 100%;
      }
      header{
      position: absolute;
      width: 100%;
      height: 144px;
      top: 0;
      }
      .data {
      position: absolute;
      width: 100%;
      min-height: calc(100vh - 192px);
      top: 168px;
      }

      <html>
      <head></head>
      <body>
      <header></header>
      <div class="data"><div>
      </body>
      </html>





      Where i need 24px of margin between header and .data and between data and the bottom of the page. It works fine until i insert more content into .data so that it stretches beyond the min-height specified. So i lose the bottom margin of the page. I tried adding content with :after but it didn't work. Any suggestions?
      Cheers.










      share|improve this question














      So i have this HTML page where there are 3 main elements, a side navigation bar, a header, and a data section, which for some reason are all positioned absolutely. Briefly it looks something like this:






      html{
      height: 100%;
      }
      body{
      height: 100%;
      }
      header{
      position: absolute;
      width: 100%;
      height: 144px;
      top: 0;
      }
      .data {
      position: absolute;
      width: 100%;
      min-height: calc(100vh - 192px);
      top: 168px;
      }

      <html>
      <head></head>
      <body>
      <header></header>
      <div class="data"><div>
      </body>
      </html>





      Where i need 24px of margin between header and .data and between data and the bottom of the page. It works fine until i insert more content into .data so that it stretches beyond the min-height specified. So i lose the bottom margin of the page. I tried adding content with :after but it didn't work. Any suggestions?
      Cheers.






      html{
      height: 100%;
      }
      body{
      height: 100%;
      }
      header{
      position: absolute;
      width: 100%;
      height: 144px;
      top: 0;
      }
      .data {
      position: absolute;
      width: 100%;
      min-height: calc(100vh - 192px);
      top: 168px;
      }

      <html>
      <head></head>
      <body>
      <header></header>
      <div class="data"><div>
      </body>
      </html>





      html{
      height: 100%;
      }
      body{
      height: 100%;
      }
      header{
      position: absolute;
      width: 100%;
      height: 144px;
      top: 0;
      }
      .data {
      position: absolute;
      width: 100%;
      min-height: calc(100vh - 192px);
      top: 168px;
      }

      <html>
      <head></head>
      <body>
      <header></header>
      <div class="data"><div>
      </body>
      </html>






      html css






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 1 at 12:06









      Arash ChMArash ChM

      84




      84
























          2 Answers
          2






          active

          oldest

          votes


















          0














          Add margin bottom to .data class in css



          .data {position: absolute;  width: 100%;  min-height: calc(100vh - 192px);  top: 168px; margin:0 0 24px 0;}





          share|improve this answer
























          • This doesn't work. When I try this the margin is there, but it kind of overflows the page. I can see there is 24px of margin-bottom when I inspect the element, but it has no effect, something like the vertical margin collapse is happening here I guess.

            – Arash ChM
            Jan 1 at 13:03











          • test your html content on this pen codepen.io/anon/pen/MZORRq

            – Jagannath Kinikar
            Jan 1 at 13:14











          • I saw your piece of code work even though i added more content, and compared it to my code, I realized the problem was the content in .data was also positioned absolutely, so what I did was specify the margin-bottom for the content not the box(the .data div) and this solved my problem.

            – Arash ChM
            Jan 2 at 7:13



















          0














          The body has a margin of 8px by default set it to 0 if you want it to look smoothly and then change the min-height to height as a way to stop the element from extending over the set value. However if you add more content that the element can hold within it self the contents will overflow the element so you will have to set the overflow of your element (i would recommend you to use auto so your content would be accessible), adding this to your code should fix your problem



           body{
          height: 100%;
          margin:0;
          }
          .data {
          position: absolute;
          width: 100%;
          height: calc(100vh - 192px);
          top: 168px;
          overflow:auto;
          margin-bottom: 24px;
          }





          share|improve this answer


























          • No sadly this doesn't help. I'm actually trying to make sure the margin is always there, not get rid of it.

            – Arash ChM
            Jan 1 at 12:23











          • I obviously didn't understood your question, okay so now i believe that you are supposed to change min-height: calc(100vh - 192px); to height: calc(100vh - 192px); as a way to prevent the div from extending over the set value but if you add more content than the element's height the content will overflow the .data element (but the overflow property will handle it) @ArashChM

            – Miki Sarkovski
            Jan 1 at 12:36













          • Yes, this is actually what I had in mind in case nothing worked, but I want to avoid using a scroll bar. I want the .data section to fill the page should the content be less than enough to fill it, but i need .data to expand if there is more content. And as of now everything works as intended except when .data expands further than min-height, it sticks to the bottom of the page and the page looks crappy.

            – Arash ChM
            Jan 1 at 12:53













          • Okay so as i understand what you need so far is that you need the container to extend when there is more content but you still need the bottom margin to be visible and each time you add more content to your element you are losing your bottom margin even if you use margin-bottom:24px; ?

            – Miki Sarkovski
            Jan 1 at 13:17











          • Yes exactly. I did try margin on .data and padding on body (Although I know it's so stupid of me to try it, because the body height is equal to my browser height no matter what the height of .data is, as it is positioned absolutely and already removed from the normal flow) and none of them work. I think I can find a way around this by manually assigning body height using JavaScript, but I actually prefer to do this in pure CSS.

            – Arash ChM
            Jan 1 at 13:31











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995299%2fadding-padding-bottom-to-a-page-where-all-elements-are-positioned-absolutely%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          Add margin bottom to .data class in css



          .data {position: absolute;  width: 100%;  min-height: calc(100vh - 192px);  top: 168px; margin:0 0 24px 0;}





          share|improve this answer
























          • This doesn't work. When I try this the margin is there, but it kind of overflows the page. I can see there is 24px of margin-bottom when I inspect the element, but it has no effect, something like the vertical margin collapse is happening here I guess.

            – Arash ChM
            Jan 1 at 13:03











          • test your html content on this pen codepen.io/anon/pen/MZORRq

            – Jagannath Kinikar
            Jan 1 at 13:14











          • I saw your piece of code work even though i added more content, and compared it to my code, I realized the problem was the content in .data was also positioned absolutely, so what I did was specify the margin-bottom for the content not the box(the .data div) and this solved my problem.

            – Arash ChM
            Jan 2 at 7:13
















          0














          Add margin bottom to .data class in css



          .data {position: absolute;  width: 100%;  min-height: calc(100vh - 192px);  top: 168px; margin:0 0 24px 0;}





          share|improve this answer
























          • This doesn't work. When I try this the margin is there, but it kind of overflows the page. I can see there is 24px of margin-bottom when I inspect the element, but it has no effect, something like the vertical margin collapse is happening here I guess.

            – Arash ChM
            Jan 1 at 13:03











          • test your html content on this pen codepen.io/anon/pen/MZORRq

            – Jagannath Kinikar
            Jan 1 at 13:14











          • I saw your piece of code work even though i added more content, and compared it to my code, I realized the problem was the content in .data was also positioned absolutely, so what I did was specify the margin-bottom for the content not the box(the .data div) and this solved my problem.

            – Arash ChM
            Jan 2 at 7:13














          0












          0








          0







          Add margin bottom to .data class in css



          .data {position: absolute;  width: 100%;  min-height: calc(100vh - 192px);  top: 168px; margin:0 0 24px 0;}





          share|improve this answer













          Add margin bottom to .data class in css



          .data {position: absolute;  width: 100%;  min-height: calc(100vh - 192px);  top: 168px; margin:0 0 24px 0;}






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Jan 1 at 12:51









          Jagannath KinikarJagannath Kinikar

          11




          11













          • This doesn't work. When I try this the margin is there, but it kind of overflows the page. I can see there is 24px of margin-bottom when I inspect the element, but it has no effect, something like the vertical margin collapse is happening here I guess.

            – Arash ChM
            Jan 1 at 13:03











          • test your html content on this pen codepen.io/anon/pen/MZORRq

            – Jagannath Kinikar
            Jan 1 at 13:14











          • I saw your piece of code work even though i added more content, and compared it to my code, I realized the problem was the content in .data was also positioned absolutely, so what I did was specify the margin-bottom for the content not the box(the .data div) and this solved my problem.

            – Arash ChM
            Jan 2 at 7:13



















          • This doesn't work. When I try this the margin is there, but it kind of overflows the page. I can see there is 24px of margin-bottom when I inspect the element, but it has no effect, something like the vertical margin collapse is happening here I guess.

            – Arash ChM
            Jan 1 at 13:03











          • test your html content on this pen codepen.io/anon/pen/MZORRq

            – Jagannath Kinikar
            Jan 1 at 13:14











          • I saw your piece of code work even though i added more content, and compared it to my code, I realized the problem was the content in .data was also positioned absolutely, so what I did was specify the margin-bottom for the content not the box(the .data div) and this solved my problem.

            – Arash ChM
            Jan 2 at 7:13

















          This doesn't work. When I try this the margin is there, but it kind of overflows the page. I can see there is 24px of margin-bottom when I inspect the element, but it has no effect, something like the vertical margin collapse is happening here I guess.

          – Arash ChM
          Jan 1 at 13:03





          This doesn't work. When I try this the margin is there, but it kind of overflows the page. I can see there is 24px of margin-bottom when I inspect the element, but it has no effect, something like the vertical margin collapse is happening here I guess.

          – Arash ChM
          Jan 1 at 13:03













          test your html content on this pen codepen.io/anon/pen/MZORRq

          – Jagannath Kinikar
          Jan 1 at 13:14





          test your html content on this pen codepen.io/anon/pen/MZORRq

          – Jagannath Kinikar
          Jan 1 at 13:14













          I saw your piece of code work even though i added more content, and compared it to my code, I realized the problem was the content in .data was also positioned absolutely, so what I did was specify the margin-bottom for the content not the box(the .data div) and this solved my problem.

          – Arash ChM
          Jan 2 at 7:13





          I saw your piece of code work even though i added more content, and compared it to my code, I realized the problem was the content in .data was also positioned absolutely, so what I did was specify the margin-bottom for the content not the box(the .data div) and this solved my problem.

          – Arash ChM
          Jan 2 at 7:13













          0














          The body has a margin of 8px by default set it to 0 if you want it to look smoothly and then change the min-height to height as a way to stop the element from extending over the set value. However if you add more content that the element can hold within it self the contents will overflow the element so you will have to set the overflow of your element (i would recommend you to use auto so your content would be accessible), adding this to your code should fix your problem



           body{
          height: 100%;
          margin:0;
          }
          .data {
          position: absolute;
          width: 100%;
          height: calc(100vh - 192px);
          top: 168px;
          overflow:auto;
          margin-bottom: 24px;
          }





          share|improve this answer


























          • No sadly this doesn't help. I'm actually trying to make sure the margin is always there, not get rid of it.

            – Arash ChM
            Jan 1 at 12:23











          • I obviously didn't understood your question, okay so now i believe that you are supposed to change min-height: calc(100vh - 192px); to height: calc(100vh - 192px); as a way to prevent the div from extending over the set value but if you add more content than the element's height the content will overflow the .data element (but the overflow property will handle it) @ArashChM

            – Miki Sarkovski
            Jan 1 at 12:36













          • Yes, this is actually what I had in mind in case nothing worked, but I want to avoid using a scroll bar. I want the .data section to fill the page should the content be less than enough to fill it, but i need .data to expand if there is more content. And as of now everything works as intended except when .data expands further than min-height, it sticks to the bottom of the page and the page looks crappy.

            – Arash ChM
            Jan 1 at 12:53













          • Okay so as i understand what you need so far is that you need the container to extend when there is more content but you still need the bottom margin to be visible and each time you add more content to your element you are losing your bottom margin even if you use margin-bottom:24px; ?

            – Miki Sarkovski
            Jan 1 at 13:17











          • Yes exactly. I did try margin on .data and padding on body (Although I know it's so stupid of me to try it, because the body height is equal to my browser height no matter what the height of .data is, as it is positioned absolutely and already removed from the normal flow) and none of them work. I think I can find a way around this by manually assigning body height using JavaScript, but I actually prefer to do this in pure CSS.

            – Arash ChM
            Jan 1 at 13:31
















          0














          The body has a margin of 8px by default set it to 0 if you want it to look smoothly and then change the min-height to height as a way to stop the element from extending over the set value. However if you add more content that the element can hold within it self the contents will overflow the element so you will have to set the overflow of your element (i would recommend you to use auto so your content would be accessible), adding this to your code should fix your problem



           body{
          height: 100%;
          margin:0;
          }
          .data {
          position: absolute;
          width: 100%;
          height: calc(100vh - 192px);
          top: 168px;
          overflow:auto;
          margin-bottom: 24px;
          }





          share|improve this answer


























          • No sadly this doesn't help. I'm actually trying to make sure the margin is always there, not get rid of it.

            – Arash ChM
            Jan 1 at 12:23











          • I obviously didn't understood your question, okay so now i believe that you are supposed to change min-height: calc(100vh - 192px); to height: calc(100vh - 192px); as a way to prevent the div from extending over the set value but if you add more content than the element's height the content will overflow the .data element (but the overflow property will handle it) @ArashChM

            – Miki Sarkovski
            Jan 1 at 12:36













          • Yes, this is actually what I had in mind in case nothing worked, but I want to avoid using a scroll bar. I want the .data section to fill the page should the content be less than enough to fill it, but i need .data to expand if there is more content. And as of now everything works as intended except when .data expands further than min-height, it sticks to the bottom of the page and the page looks crappy.

            – Arash ChM
            Jan 1 at 12:53













          • Okay so as i understand what you need so far is that you need the container to extend when there is more content but you still need the bottom margin to be visible and each time you add more content to your element you are losing your bottom margin even if you use margin-bottom:24px; ?

            – Miki Sarkovski
            Jan 1 at 13:17











          • Yes exactly. I did try margin on .data and padding on body (Although I know it's so stupid of me to try it, because the body height is equal to my browser height no matter what the height of .data is, as it is positioned absolutely and already removed from the normal flow) and none of them work. I think I can find a way around this by manually assigning body height using JavaScript, but I actually prefer to do this in pure CSS.

            – Arash ChM
            Jan 1 at 13:31














          0












          0








          0







          The body has a margin of 8px by default set it to 0 if you want it to look smoothly and then change the min-height to height as a way to stop the element from extending over the set value. However if you add more content that the element can hold within it self the contents will overflow the element so you will have to set the overflow of your element (i would recommend you to use auto so your content would be accessible), adding this to your code should fix your problem



           body{
          height: 100%;
          margin:0;
          }
          .data {
          position: absolute;
          width: 100%;
          height: calc(100vh - 192px);
          top: 168px;
          overflow:auto;
          margin-bottom: 24px;
          }





          share|improve this answer















          The body has a margin of 8px by default set it to 0 if you want it to look smoothly and then change the min-height to height as a way to stop the element from extending over the set value. However if you add more content that the element can hold within it self the contents will overflow the element so you will have to set the overflow of your element (i would recommend you to use auto so your content would be accessible), adding this to your code should fix your problem



           body{
          height: 100%;
          margin:0;
          }
          .data {
          position: absolute;
          width: 100%;
          height: calc(100vh - 192px);
          top: 168px;
          overflow:auto;
          margin-bottom: 24px;
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 2 at 4:06

























          answered Jan 1 at 12:18









          Miki SarkovskiMiki Sarkovski

          135




          135













          • No sadly this doesn't help. I'm actually trying to make sure the margin is always there, not get rid of it.

            – Arash ChM
            Jan 1 at 12:23











          • I obviously didn't understood your question, okay so now i believe that you are supposed to change min-height: calc(100vh - 192px); to height: calc(100vh - 192px); as a way to prevent the div from extending over the set value but if you add more content than the element's height the content will overflow the .data element (but the overflow property will handle it) @ArashChM

            – Miki Sarkovski
            Jan 1 at 12:36













          • Yes, this is actually what I had in mind in case nothing worked, but I want to avoid using a scroll bar. I want the .data section to fill the page should the content be less than enough to fill it, but i need .data to expand if there is more content. And as of now everything works as intended except when .data expands further than min-height, it sticks to the bottom of the page and the page looks crappy.

            – Arash ChM
            Jan 1 at 12:53













          • Okay so as i understand what you need so far is that you need the container to extend when there is more content but you still need the bottom margin to be visible and each time you add more content to your element you are losing your bottom margin even if you use margin-bottom:24px; ?

            – Miki Sarkovski
            Jan 1 at 13:17











          • Yes exactly. I did try margin on .data and padding on body (Although I know it's so stupid of me to try it, because the body height is equal to my browser height no matter what the height of .data is, as it is positioned absolutely and already removed from the normal flow) and none of them work. I think I can find a way around this by manually assigning body height using JavaScript, but I actually prefer to do this in pure CSS.

            – Arash ChM
            Jan 1 at 13:31



















          • No sadly this doesn't help. I'm actually trying to make sure the margin is always there, not get rid of it.

            – Arash ChM
            Jan 1 at 12:23











          • I obviously didn't understood your question, okay so now i believe that you are supposed to change min-height: calc(100vh - 192px); to height: calc(100vh - 192px); as a way to prevent the div from extending over the set value but if you add more content than the element's height the content will overflow the .data element (but the overflow property will handle it) @ArashChM

            – Miki Sarkovski
            Jan 1 at 12:36













          • Yes, this is actually what I had in mind in case nothing worked, but I want to avoid using a scroll bar. I want the .data section to fill the page should the content be less than enough to fill it, but i need .data to expand if there is more content. And as of now everything works as intended except when .data expands further than min-height, it sticks to the bottom of the page and the page looks crappy.

            – Arash ChM
            Jan 1 at 12:53













          • Okay so as i understand what you need so far is that you need the container to extend when there is more content but you still need the bottom margin to be visible and each time you add more content to your element you are losing your bottom margin even if you use margin-bottom:24px; ?

            – Miki Sarkovski
            Jan 1 at 13:17











          • Yes exactly. I did try margin on .data and padding on body (Although I know it's so stupid of me to try it, because the body height is equal to my browser height no matter what the height of .data is, as it is positioned absolutely and already removed from the normal flow) and none of them work. I think I can find a way around this by manually assigning body height using JavaScript, but I actually prefer to do this in pure CSS.

            – Arash ChM
            Jan 1 at 13:31

















          No sadly this doesn't help. I'm actually trying to make sure the margin is always there, not get rid of it.

          – Arash ChM
          Jan 1 at 12:23





          No sadly this doesn't help. I'm actually trying to make sure the margin is always there, not get rid of it.

          – Arash ChM
          Jan 1 at 12:23













          I obviously didn't understood your question, okay so now i believe that you are supposed to change min-height: calc(100vh - 192px); to height: calc(100vh - 192px); as a way to prevent the div from extending over the set value but if you add more content than the element's height the content will overflow the .data element (but the overflow property will handle it) @ArashChM

          – Miki Sarkovski
          Jan 1 at 12:36







          I obviously didn't understood your question, okay so now i believe that you are supposed to change min-height: calc(100vh - 192px); to height: calc(100vh - 192px); as a way to prevent the div from extending over the set value but if you add more content than the element's height the content will overflow the .data element (but the overflow property will handle it) @ArashChM

          – Miki Sarkovski
          Jan 1 at 12:36















          Yes, this is actually what I had in mind in case nothing worked, but I want to avoid using a scroll bar. I want the .data section to fill the page should the content be less than enough to fill it, but i need .data to expand if there is more content. And as of now everything works as intended except when .data expands further than min-height, it sticks to the bottom of the page and the page looks crappy.

          – Arash ChM
          Jan 1 at 12:53







          Yes, this is actually what I had in mind in case nothing worked, but I want to avoid using a scroll bar. I want the .data section to fill the page should the content be less than enough to fill it, but i need .data to expand if there is more content. And as of now everything works as intended except when .data expands further than min-height, it sticks to the bottom of the page and the page looks crappy.

          – Arash ChM
          Jan 1 at 12:53















          Okay so as i understand what you need so far is that you need the container to extend when there is more content but you still need the bottom margin to be visible and each time you add more content to your element you are losing your bottom margin even if you use margin-bottom:24px; ?

          – Miki Sarkovski
          Jan 1 at 13:17





          Okay so as i understand what you need so far is that you need the container to extend when there is more content but you still need the bottom margin to be visible and each time you add more content to your element you are losing your bottom margin even if you use margin-bottom:24px; ?

          – Miki Sarkovski
          Jan 1 at 13:17













          Yes exactly. I did try margin on .data and padding on body (Although I know it's so stupid of me to try it, because the body height is equal to my browser height no matter what the height of .data is, as it is positioned absolutely and already removed from the normal flow) and none of them work. I think I can find a way around this by manually assigning body height using JavaScript, but I actually prefer to do this in pure CSS.

          – Arash ChM
          Jan 1 at 13:31





          Yes exactly. I did try margin on .data and padding on body (Although I know it's so stupid of me to try it, because the body height is equal to my browser height no matter what the height of .data is, as it is positioned absolutely and already removed from the normal flow) and none of them work. I think I can find a way around this by manually assigning body height using JavaScript, but I actually prefer to do this in pure CSS.

          – Arash ChM
          Jan 1 at 13:31


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995299%2fadding-padding-bottom-to-a-page-where-all-elements-are-positioned-absolutely%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas