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.
html css
asked Jan 1 at 12:06
Arash ChMArash ChM
84
add a comment |
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.
html css
asked Jan 1 at 12:06
Arash ChMArash ChM
84
add a comment |
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.
html css
asked Jan 1 at 12:06
Arash ChMArash ChM
84
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
html css
asked Jan 1 at 12:06
Arash ChMArash ChM
84
asked Jan 1 at 12:06
Arash ChMArash ChM
84
asked Jan 1 at 12:06
Arash ChMArash ChM
84
asked Jan 1 at 12:06
Arash ChMArash ChM
84
asked Jan 1 at 12:06
Arash ChMArash ChM
84
84
add a comment |
add a comment |
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;}
answered Jan 1 at 12:51
Jagannath KinikarJagannath Kinikar
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
add a comment |
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;
}
answered Jan 1 at 12:18
Miki SarkovskiMiki Sarkovski
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
|
show 2 more comments
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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;}
answered Jan 1 at 12:51
Jagannath KinikarJagannath Kinikar
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
add a comment |
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;}
answered Jan 1 at 12:51
Jagannath KinikarJagannath Kinikar
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
add a comment |
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;}
answered Jan 1 at 12:51
Jagannath KinikarJagannath Kinikar
11
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;}
answered Jan 1 at 12:51
Jagannath KinikarJagannath Kinikar
11
answered Jan 1 at 12:51
Jagannath KinikarJagannath Kinikar
11
answered Jan 1 at 12:51
Jagannath KinikarJagannath Kinikar
11
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
add a comment |
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
add a comment |
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;
}
answered Jan 1 at 12:18
Miki SarkovskiMiki Sarkovski
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
|
show 2 more comments
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;
}
answered Jan 1 at 12:18
Miki SarkovskiMiki Sarkovski
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
|
show 2 more comments
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;
}
answered Jan 1 at 12:18
Miki SarkovskiMiki Sarkovski
135
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;
}
answered Jan 1 at 12:18
Miki SarkovskiMiki Sarkovski
135
edited Jan 2 at 4:06
answered Jan 1 at 12:18
Miki SarkovskiMiki Sarkovski
135
answered Jan 1 at 12:18
Miki SarkovskiMiki Sarkovski
135
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
|
show 2 more comments
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
|
show 2 more comments
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
