I have a weird CSS problem: the contents of my page are filling the page height 100%












0















First, I set the height of the outer most object html to 100%. I then set the min-height of the body to 100%. The page has 2 containers: header and article. The header is 90px in height. The article is calc(100% - 90px).



I added some contents to the article container as it was not displaying without it.



I read an article that talked about adding vendor prefixes for calc, so -moz-calc, -webkit-calc. That did not work. The article is only extending to wrap its contents. If you run the code you will notice that the article container is not extending to the bottom of the page.



I checked caniuse.com and found that most browsers support calc(). I do find that if I specify the height in px, it extends correctly, but since the site supports mobile I do not know the height of each device.



I did notice that changing 100% to 100vh the article now extends to the bottom of the page. I believe that with the height 100%, article is extending to the height of the parent object which in this case is the body tag. Since body is 100%. I’m stumped. I tested this on an iPad and it worked properly. On a Galaxy S5 it did not extend 100%. Maybe the phone does not support vh since it’s a bit older. I did a remote debug with my phone and computer through Chrome and found that the chrome browser likes –webkit-calc(). The weird thing is that with the phone in portrait mode it’s calculation 100vh as half the height of the screen.



Here is my code in as simple a form as I can make it:






html {

  height: 100%;

  background-color: yellow;

  padding: 0;

  margin: 0;

}



body {

  min-height: 100%;

  background-color: #acacac;

  padding: 0;

  margin: 0;

}



header {

  height: 90px;

  background-color: red;

  width: 85%;

  margin: 0 auto;

}



article {

  min-height: -moz-calc(100vh - 90px) !important;

  min-height: -webkit-calc(100vh - 90px) !important;

  min-height: calc(100vh - 90px) !important;

  background-color: white;

  width: 85%;

  margin: 0 auto;

}

<header></header>

<article>

  <br />

  <div style="background-color:green; width:50%; height:200px; margin:0 auto">bbb</div>

  <br />

</article>








css







share|improve this question




















  • 1





    There's no attribute passing: 0; in CSS specification as you defined it in body element

    – Banzay
    Jan 18 at 19:12











  • You switched your example code to use 100vh and appears to be working properly. The white background of article is extending to the bottom of the viewport.

    – hungerstar
    Jan 18 at 19:21











  • passing should have been padding. sorry about that.

    – RCDAWebmaster
    Jan 22 at 14:05
















0















First, I set the height of the outer most object html to 100%. I then set the min-height of the body to 100%. The page has 2 containers: header and article. The header is 90px in height. The article is calc(100% - 90px).



I added some contents to the article container as it was not displaying without it.



I read an article that talked about adding vendor prefixes for calc, so -moz-calc, -webkit-calc. That did not work. The article is only extending to wrap its contents. If you run the code you will notice that the article container is not extending to the bottom of the page.



I checked caniuse.com and found that most browsers support calc(). I do find that if I specify the height in px, it extends correctly, but since the site supports mobile I do not know the height of each device.



I did notice that changing 100% to 100vh the article now extends to the bottom of the page. I believe that with the height 100%, article is extending to the height of the parent object which in this case is the body tag. Since body is 100%. I’m stumped. I tested this on an iPad and it worked properly. On a Galaxy S5 it did not extend 100%. Maybe the phone does not support vh since it’s a bit older. I did a remote debug with my phone and computer through Chrome and found that the chrome browser likes –webkit-calc(). The weird thing is that with the phone in portrait mode it’s calculation 100vh as half the height of the screen.



Here is my code in as simple a form as I can make it:






html {

  height: 100%;

  background-color: yellow;

  padding: 0;

  margin: 0;

}



body {

  min-height: 100%;

  background-color: #acacac;

  padding: 0;

  margin: 0;

}



header {

  height: 90px;

  background-color: red;

  width: 85%;

  margin: 0 auto;

}



article {

  min-height: -moz-calc(100vh - 90px) !important;

  min-height: -webkit-calc(100vh - 90px) !important;

  min-height: calc(100vh - 90px) !important;

  background-color: white;

  width: 85%;

  margin: 0 auto;

}

<header></header>

<article>

  <br />

  <div style="background-color:green; width:50%; height:200px; margin:0 auto">bbb</div>

  <br />

</article>








css







share|improve this question




















  • 1





    There's no attribute passing: 0; in CSS specification as you defined it in body element

    – Banzay
    Jan 18 at 19:12











  • You switched your example code to use 100vh and appears to be working properly. The white background of article is extending to the bottom of the viewport.

    – hungerstar
    Jan 18 at 19:21











  • passing should have been padding. sorry about that.

    – RCDAWebmaster
    Jan 22 at 14:05














0












0








0








First, I set the height of the outer most object html to 100%. I then set the min-height of the body to 100%. The page has 2 containers: header and article. The header is 90px in height. The article is calc(100% - 90px).



I added some contents to the article container as it was not displaying without it.



I read an article that talked about adding vendor prefixes for calc, so -moz-calc, -webkit-calc. That did not work. The article is only extending to wrap its contents. If you run the code you will notice that the article container is not extending to the bottom of the page.



I checked caniuse.com and found that most browsers support calc(). I do find that if I specify the height in px, it extends correctly, but since the site supports mobile I do not know the height of each device.



I did notice that changing 100% to 100vh the article now extends to the bottom of the page. I believe that with the height 100%, article is extending to the height of the parent object which in this case is the body tag. Since body is 100%. I’m stumped. I tested this on an iPad and it worked properly. On a Galaxy S5 it did not extend 100%. Maybe the phone does not support vh since it’s a bit older. I did a remote debug with my phone and computer through Chrome and found that the chrome browser likes –webkit-calc(). The weird thing is that with the phone in portrait mode it’s calculation 100vh as half the height of the screen.



Here is my code in as simple a form as I can make it:






html {

  height: 100%;

  background-color: yellow;

  padding: 0;

  margin: 0;

}



body {

  min-height: 100%;

  background-color: #acacac;

  padding: 0;

  margin: 0;

}



header {

  height: 90px;

  background-color: red;

  width: 85%;

  margin: 0 auto;

}



article {

  min-height: -moz-calc(100vh - 90px) !important;

  min-height: -webkit-calc(100vh - 90px) !important;

  min-height: calc(100vh - 90px) !important;

  background-color: white;

  width: 85%;

  margin: 0 auto;

}

<header></header>

<article>

  <br />

  <div style="background-color:green; width:50%; height:200px; margin:0 auto">bbb</div>

  <br />

</article>








css







share|improve this question
















First, I set the height of the outer most object html to 100%. I then set the min-height of the body to 100%. The page has 2 containers: header and article. The header is 90px in height. The article is calc(100% - 90px).



I added some contents to the article container as it was not displaying without it.



I read an article that talked about adding vendor prefixes for calc, so -moz-calc, -webkit-calc. That did not work. The article is only extending to wrap its contents. If you run the code you will notice that the article container is not extending to the bottom of the page.



I checked caniuse.com and found that most browsers support calc(). I do find that if I specify the height in px, it extends correctly, but since the site supports mobile I do not know the height of each device.



I did notice that changing 100% to 100vh the article now extends to the bottom of the page. I believe that with the height 100%, article is extending to the height of the parent object which in this case is the body tag. Since body is 100%. I’m stumped. I tested this on an iPad and it worked properly. On a Galaxy S5 it did not extend 100%. Maybe the phone does not support vh since it’s a bit older. I did a remote debug with my phone and computer through Chrome and found that the chrome browser likes –webkit-calc(). The weird thing is that with the phone in portrait mode it’s calculation 100vh as half the height of the screen.



Here is my code in as simple a form as I can make it:






html {

  height: 100%;

  background-color: yellow;

  padding: 0;

  margin: 0;

}



body {

  min-height: 100%;

  background-color: #acacac;

  padding: 0;

  margin: 0;

}



header {

  height: 90px;

  background-color: red;

  width: 85%;

  margin: 0 auto;

}



article {

  min-height: -moz-calc(100vh - 90px) !important;

  min-height: -webkit-calc(100vh - 90px) !important;

  min-height: calc(100vh - 90px) !important;

  background-color: white;

  width: 85%;

  margin: 0 auto;

}

<header></header>

<article>

  <br />

  <div style="background-color:green; width:50%; height:200px; margin:0 auto">bbb</div>

  <br />

</article>








html {

  height: 100%;

  background-color: yellow;

  padding: 0;

  margin: 0;

}



body {

  min-height: 100%;

  background-color: #acacac;

  padding: 0;

  margin: 0;

}



header {

  height: 90px;

  background-color: red;

  width: 85%;

  margin: 0 auto;

}



article {

  min-height: -moz-calc(100vh - 90px) !important;

  min-height: -webkit-calc(100vh - 90px) !important;

  min-height: calc(100vh - 90px) !important;

  background-color: white;

  width: 85%;

  margin: 0 auto;

}

<header></header>

<article>

  <br />

  <div style="background-color:green; width:50%; height:200px; margin:0 auto">bbb</div>

  <br />

</article>





html {

  height: 100%;

  background-color: yellow;

  padding: 0;

  margin: 0;

}



body {

  min-height: 100%;

  background-color: #acacac;

  padding: 0;

  margin: 0;

}



header {

  height: 90px;

  background-color: red;

  width: 85%;

  margin: 0 auto;

}



article {

  min-height: -moz-calc(100vh - 90px) !important;

  min-height: -webkit-calc(100vh - 90px) !important;

  min-height: calc(100vh - 90px) !important;

  background-color: white;

  width: 85%;

  margin: 0 auto;

}

<header></header>

<article>

  <br />

  <div style="background-color:green; width:50%; height:200px; margin:0 auto">bbb</div>

  <br />

</article>





css




css






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 22 at 14:05







RCDAWebmaster

















asked Jan 18 at 18:58









RCDAWebmasterRCDAWebmaster

206




206








  • 1





    There's no attribute passing: 0; in CSS specification as you defined it in body element

    – Banzay
    Jan 18 at 19:12











  • You switched your example code to use 100vh and appears to be working properly. The white background of article is extending to the bottom of the viewport.

    – hungerstar
    Jan 18 at 19:21











  • passing should have been padding. sorry about that.

    – RCDAWebmaster
    Jan 22 at 14:05














  • 1





    There's no attribute passing: 0; in CSS specification as you defined it in body element

    – Banzay
    Jan 18 at 19:12











  • You switched your example code to use 100vh and appears to be working properly. The white background of article is extending to the bottom of the viewport.

    – hungerstar
    Jan 18 at 19:21











  • passing should have been padding. sorry about that.

    – RCDAWebmaster
    Jan 22 at 14:05








1




1





There's no attribute passing: 0; in CSS specification as you defined it in body element

– Banzay
Jan 18 at 19:12





There's no attribute passing: 0; in CSS specification as you defined it in body element

– Banzay
Jan 18 at 19:12













You switched your example code to use 100vh and appears to be working properly. The white background of article is extending to the bottom of the viewport.

– hungerstar
Jan 18 at 19:21





You switched your example code to use 100vh and appears to be working properly. The white background of article is extending to the bottom of the viewport.

– hungerstar
Jan 18 at 19:21













passing should have been padding. sorry about that.

– RCDAWebmaster
Jan 22 at 14:05





passing should have been padding. sorry about that.

– RCDAWebmaster
Jan 22 at 14:05












2 Answers
2






active

oldest

votes


















0














height 100% only works if there is a parent element with a position and a fixed height.
If you don't have that, you need to use 100vh (viewport height). Keep in mind that 100vh does not represent the full screen on some touch devices (ipad) as some of the toolbars are not respected in the calculation.






share|improve this answer
























  • You don't need a position, just a height on the parent for height: 100%; to work.

    – hungerstar
    Jan 18 at 19:10











  • I just tried while remote debugging to set the height of article, the parent( body tag) and HTML all to 100%. i'm only getting the page to fill 602px rather than the whole page. I did try vh, but that too did not work. in order to get the page to load correctly on my android phone I need to set HTML to 145vh, but that will cause pages to be too long on PC.

    – RCDAWebmaster
    Jan 18 at 19:40



















0














height:100% won't give you 100% of the height of the viewport, only of the page content (or parent element). height:100vh (viewport height) seems to be working for most browsers for you, right? So maybe it's figuring out why it's not working correctly on certain devices? This article may help. https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css



(Need more info to figure out why it's not behaving as expected with viewport height on your phone.)






share|improve this answer


























  • Your answer is a bit unclear. When you mention height: 100%, are you referring to the html, body, or article element?

    – hungerstar
    Jan 18 at 19:21











  • When I mention height:100%, I'm referring to any element where the OP has used height:100% -- in this current case, html and body. (In the original code, article does not have a height:100% applied to it, so not that.) Except in rare cases, I generally don't apply attributes to my html element (because it's the body that is the first visible element in the viewport), but some folks still do (browser support has historically been mixed for styling the html element). In this case, 100vh of the html element and 100vh of the body element are going to be the same value.

    – Kerri
    Jan 18 at 19:42











  • Well, 1) you should clarify your answer and 2) it's not accurate when talking about html and body. When height: 100%; is applied to html and body, body will be 100% of the viewport height. Percentage heights require their parent element to have a height. When the element is html, the viewport will be the reference for height: 100% and match it. Thus why people add height: 100%; to html and not body alone - body inherits from html which inherits from the viewport.

    – hungerstar
    Jan 18 at 20:39











  • You're right that applying height:100% to html will fill the viewport vertically on modern browsers. However, after doing so, setting body to height:100% will not fill the entire viewport. jsfiddle.net/kerri9494/qeswv7pa

    – Kerri
    Jan 18 at 22:41











  • body is the same height as the viewport. We can debate if it "does not fill the viewport." It sort of looks like it might not because of margins on body and the content of body.

    – hungerstar
    Jan 18 at 22:51













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%2f54259958%2fi-have-a-weird-css-problem-the-contents-of-my-page-are-filling-the-page-height%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














height 100% only works if there is a parent element with a position and a fixed height.
If you don't have that, you need to use 100vh (viewport height). Keep in mind that 100vh does not represent the full screen on some touch devices (ipad) as some of the toolbars are not respected in the calculation.






share|improve this answer
























  • You don't need a position, just a height on the parent for height: 100%; to work.

    – hungerstar
    Jan 18 at 19:10











  • I just tried while remote debugging to set the height of article, the parent( body tag) and HTML all to 100%. i'm only getting the page to fill 602px rather than the whole page. I did try vh, but that too did not work. in order to get the page to load correctly on my android phone I need to set HTML to 145vh, but that will cause pages to be too long on PC.

    – RCDAWebmaster
    Jan 18 at 19:40
















0














height 100% only works if there is a parent element with a position and a fixed height.
If you don't have that, you need to use 100vh (viewport height). Keep in mind that 100vh does not represent the full screen on some touch devices (ipad) as some of the toolbars are not respected in the calculation.






share|improve this answer
























  • You don't need a position, just a height on the parent for height: 100%; to work.

    – hungerstar
    Jan 18 at 19:10











  • I just tried while remote debugging to set the height of article, the parent( body tag) and HTML all to 100%. i'm only getting the page to fill 602px rather than the whole page. I did try vh, but that too did not work. in order to get the page to load correctly on my android phone I need to set HTML to 145vh, but that will cause pages to be too long on PC.

    – RCDAWebmaster
    Jan 18 at 19:40














0












0








0







height 100% only works if there is a parent element with a position and a fixed height.
If you don't have that, you need to use 100vh (viewport height). Keep in mind that 100vh does not represent the full screen on some touch devices (ipad) as some of the toolbars are not respected in the calculation.






share|improve this answer













height 100% only works if there is a parent element with a position and a fixed height.
If you don't have that, you need to use 100vh (viewport height). Keep in mind that 100vh does not represent the full screen on some touch devices (ipad) as some of the toolbars are not respected in the calculation.







share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 18 at 19:07









MaZoliMaZoli

1319




1319













  • You don't need a position, just a height on the parent for height: 100%; to work.

    – hungerstar
    Jan 18 at 19:10











  • I just tried while remote debugging to set the height of article, the parent( body tag) and HTML all to 100%. i'm only getting the page to fill 602px rather than the whole page. I did try vh, but that too did not work. in order to get the page to load correctly on my android phone I need to set HTML to 145vh, but that will cause pages to be too long on PC.

    – RCDAWebmaster
    Jan 18 at 19:40



















  • You don't need a position, just a height on the parent for height: 100%; to work.

    – hungerstar
    Jan 18 at 19:10











  • I just tried while remote debugging to set the height of article, the parent( body tag) and HTML all to 100%. i'm only getting the page to fill 602px rather than the whole page. I did try vh, but that too did not work. in order to get the page to load correctly on my android phone I need to set HTML to 145vh, but that will cause pages to be too long on PC.

    – RCDAWebmaster
    Jan 18 at 19:40

















You don't need a position, just a height on the parent for height: 100%; to work.

– hungerstar
Jan 18 at 19:10





You don't need a position, just a height on the parent for height: 100%; to work.

– hungerstar
Jan 18 at 19:10













I just tried while remote debugging to set the height of article, the parent( body tag) and HTML all to 100%. i'm only getting the page to fill 602px rather than the whole page. I did try vh, but that too did not work. in order to get the page to load correctly on my android phone I need to set HTML to 145vh, but that will cause pages to be too long on PC.

– RCDAWebmaster
Jan 18 at 19:40





I just tried while remote debugging to set the height of article, the parent( body tag) and HTML all to 100%. i'm only getting the page to fill 602px rather than the whole page. I did try vh, but that too did not work. in order to get the page to load correctly on my android phone I need to set HTML to 145vh, but that will cause pages to be too long on PC.

– RCDAWebmaster
Jan 18 at 19:40













0














height:100% won't give you 100% of the height of the viewport, only of the page content (or parent element). height:100vh (viewport height) seems to be working for most browsers for you, right? So maybe it's figuring out why it's not working correctly on certain devices? This article may help. https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css



(Need more info to figure out why it's not behaving as expected with viewport height on your phone.)






share|improve this answer


























  • Your answer is a bit unclear. When you mention height: 100%, are you referring to the html, body, or article element?

    – hungerstar
    Jan 18 at 19:21











  • When I mention height:100%, I'm referring to any element where the OP has used height:100% -- in this current case, html and body. (In the original code, article does not have a height:100% applied to it, so not that.) Except in rare cases, I generally don't apply attributes to my html element (because it's the body that is the first visible element in the viewport), but some folks still do (browser support has historically been mixed for styling the html element). In this case, 100vh of the html element and 100vh of the body element are going to be the same value.

    – Kerri
    Jan 18 at 19:42











  • Well, 1) you should clarify your answer and 2) it's not accurate when talking about html and body. When height: 100%; is applied to html and body, body will be 100% of the viewport height. Percentage heights require their parent element to have a height. When the element is html, the viewport will be the reference for height: 100% and match it. Thus why people add height: 100%; to html and not body alone - body inherits from html which inherits from the viewport.

    – hungerstar
    Jan 18 at 20:39











  • You're right that applying height:100% to html will fill the viewport vertically on modern browsers. However, after doing so, setting body to height:100% will not fill the entire viewport. jsfiddle.net/kerri9494/qeswv7pa

    – Kerri
    Jan 18 at 22:41











  • body is the same height as the viewport. We can debate if it "does not fill the viewport." It sort of looks like it might not because of margins on body and the content of body.

    – hungerstar
    Jan 18 at 22:51


















0














height:100% won't give you 100% of the height of the viewport, only of the page content (or parent element). height:100vh (viewport height) seems to be working for most browsers for you, right? So maybe it's figuring out why it's not working correctly on certain devices? This article may help. https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css



(Need more info to figure out why it's not behaving as expected with viewport height on your phone.)






share|improve this answer


























  • Your answer is a bit unclear. When you mention height: 100%, are you referring to the html, body, or article element?

    – hungerstar
    Jan 18 at 19:21











  • When I mention height:100%, I'm referring to any element where the OP has used height:100% -- in this current case, html and body. (In the original code, article does not have a height:100% applied to it, so not that.) Except in rare cases, I generally don't apply attributes to my html element (because it's the body that is the first visible element in the viewport), but some folks still do (browser support has historically been mixed for styling the html element). In this case, 100vh of the html element and 100vh of the body element are going to be the same value.

    – Kerri
    Jan 18 at 19:42











  • Well, 1) you should clarify your answer and 2) it's not accurate when talking about html and body. When height: 100%; is applied to html and body, body will be 100% of the viewport height. Percentage heights require their parent element to have a height. When the element is html, the viewport will be the reference for height: 100% and match it. Thus why people add height: 100%; to html and not body alone - body inherits from html which inherits from the viewport.

    – hungerstar
    Jan 18 at 20:39











  • You're right that applying height:100% to html will fill the viewport vertically on modern browsers. However, after doing so, setting body to height:100% will not fill the entire viewport. jsfiddle.net/kerri9494/qeswv7pa

    – Kerri
    Jan 18 at 22:41











  • body is the same height as the viewport. We can debate if it "does not fill the viewport." It sort of looks like it might not because of margins on body and the content of body.

    – hungerstar
    Jan 18 at 22:51
















0












0








0







height:100% won't give you 100% of the height of the viewport, only of the page content (or parent element). height:100vh (viewport height) seems to be working for most browsers for you, right? So maybe it's figuring out why it's not working correctly on certain devices? This article may help. https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css



(Need more info to figure out why it's not behaving as expected with viewport height on your phone.)






share|improve this answer















height:100% won't give you 100% of the height of the viewport, only of the page content (or parent element). height:100vh (viewport height) seems to be working for most browsers for you, right? So maybe it's figuring out why it's not working correctly on certain devices? This article may help. https://www.lullabot.com/articles/unexpected-power-of-viewport-units-in-css



(Need more info to figure out why it's not behaving as expected with viewport height on your phone.)







share|improve this answer














share|improve this answer



share|improve this answer








edited Jan 18 at 19:45

























answered Jan 18 at 19:04









KerriKerri

7118




7118













  • Your answer is a bit unclear. When you mention height: 100%, are you referring to the html, body, or article element?

    – hungerstar
    Jan 18 at 19:21











  • When I mention height:100%, I'm referring to any element where the OP has used height:100% -- in this current case, html and body. (In the original code, article does not have a height:100% applied to it, so not that.) Except in rare cases, I generally don't apply attributes to my html element (because it's the body that is the first visible element in the viewport), but some folks still do (browser support has historically been mixed for styling the html element). In this case, 100vh of the html element and 100vh of the body element are going to be the same value.

    – Kerri
    Jan 18 at 19:42











  • Well, 1) you should clarify your answer and 2) it's not accurate when talking about html and body. When height: 100%; is applied to html and body, body will be 100% of the viewport height. Percentage heights require their parent element to have a height. When the element is html, the viewport will be the reference for height: 100% and match it. Thus why people add height: 100%; to html and not body alone - body inherits from html which inherits from the viewport.

    – hungerstar
    Jan 18 at 20:39











  • You're right that applying height:100% to html will fill the viewport vertically on modern browsers. However, after doing so, setting body to height:100% will not fill the entire viewport. jsfiddle.net/kerri9494/qeswv7pa

    – Kerri
    Jan 18 at 22:41











  • body is the same height as the viewport. We can debate if it "does not fill the viewport." It sort of looks like it might not because of margins on body and the content of body.

    – hungerstar
    Jan 18 at 22:51





















  • Your answer is a bit unclear. When you mention height: 100%, are you referring to the html, body, or article element?

    – hungerstar
    Jan 18 at 19:21











  • When I mention height:100%, I'm referring to any element where the OP has used height:100% -- in this current case, html and body. (In the original code, article does not have a height:100% applied to it, so not that.) Except in rare cases, I generally don't apply attributes to my html element (because it's the body that is the first visible element in the viewport), but some folks still do (browser support has historically been mixed for styling the html element). In this case, 100vh of the html element and 100vh of the body element are going to be the same value.

    – Kerri
    Jan 18 at 19:42











  • Well, 1) you should clarify your answer and 2) it's not accurate when talking about html and body. When height: 100%; is applied to html and body, body will be 100% of the viewport height. Percentage heights require their parent element to have a height. When the element is html, the viewport will be the reference for height: 100% and match it. Thus why people add height: 100%; to html and not body alone - body inherits from html which inherits from the viewport.

    – hungerstar
    Jan 18 at 20:39











  • You're right that applying height:100% to html will fill the viewport vertically on modern browsers. However, after doing so, setting body to height:100% will not fill the entire viewport. jsfiddle.net/kerri9494/qeswv7pa

    – Kerri
    Jan 18 at 22:41











  • body is the same height as the viewport. We can debate if it "does not fill the viewport." It sort of looks like it might not because of margins on body and the content of body.

    – hungerstar
    Jan 18 at 22:51



















Your answer is a bit unclear. When you mention height: 100%, are you referring to the html, body, or article element?

– hungerstar
Jan 18 at 19:21





Your answer is a bit unclear. When you mention height: 100%, are you referring to the html, body, or article element?

– hungerstar
Jan 18 at 19:21













When I mention height:100%, I'm referring to any element where the OP has used height:100% -- in this current case, html and body. (In the original code, article does not have a height:100% applied to it, so not that.) Except in rare cases, I generally don't apply attributes to my html element (because it's the body that is the first visible element in the viewport), but some folks still do (browser support has historically been mixed for styling the html element). In this case, 100vh of the html element and 100vh of the body element are going to be the same value.

– Kerri
Jan 18 at 19:42





When I mention height:100%, I'm referring to any element where the OP has used height:100% -- in this current case, html and body. (In the original code, article does not have a height:100% applied to it, so not that.) Except in rare cases, I generally don't apply attributes to my html element (because it's the body that is the first visible element in the viewport), but some folks still do (browser support has historically been mixed for styling the html element). In this case, 100vh of the html element and 100vh of the body element are going to be the same value.

– Kerri
Jan 18 at 19:42













Well, 1) you should clarify your answer and 2) it's not accurate when talking about html and body. When height: 100%; is applied to html and body, body will be 100% of the viewport height. Percentage heights require their parent element to have a height. When the element is html, the viewport will be the reference for height: 100% and match it. Thus why people add height: 100%; to html and not body alone - body inherits from html which inherits from the viewport.

– hungerstar
Jan 18 at 20:39





Well, 1) you should clarify your answer and 2) it's not accurate when talking about html and body. When height: 100%; is applied to html and body, body will be 100% of the viewport height. Percentage heights require their parent element to have a height. When the element is html, the viewport will be the reference for height: 100% and match it. Thus why people add height: 100%; to html and not body alone - body inherits from html which inherits from the viewport.

– hungerstar
Jan 18 at 20:39













You're right that applying height:100% to html will fill the viewport vertically on modern browsers. However, after doing so, setting body to height:100% will not fill the entire viewport. jsfiddle.net/kerri9494/qeswv7pa

– Kerri
Jan 18 at 22:41





You're right that applying height:100% to html will fill the viewport vertically on modern browsers. However, after doing so, setting body to height:100% will not fill the entire viewport. jsfiddle.net/kerri9494/qeswv7pa

– Kerri
Jan 18 at 22:41













body is the same height as the viewport. We can debate if it "does not fill the viewport." It sort of looks like it might not because of margins on body and the content of body.

– hungerstar
Jan 18 at 22:51







body is the same height as the viewport. We can debate if it "does not fill the viewport." It sort of looks like it might not because of margins on body and the content of body.

– hungerstar
Jan 18 at 22:51




















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%2f54259958%2fi-have-a-weird-css-problem-the-contents-of-my-page-are-filling-the-page-height%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

Liquibase includeAll doesn't find base path

Image
0 while migrating a project from maven to gradle I ran in the following problem. My file structure looks like this: The changelog-master.xml includes the changelog-v1-0.xml, which then should include the directory v1-0 with following line: <includeAll path="src/main/resources/liquibase/changelogs/v1-0/" errorIfMissingOrEmpty="true" /> . This works just fine. This: <includeAll path="/liquibase/changelogs/v1-0/" errorIfMissingOrEmpty="true" relativeToChangelogFile="true" /> doesn't. I get following errormessage: Cannot find base path 'src/main/resources/liquibase/changelogs/changelog-v1-0.xml' with liquibase in version 3.6.2. I also tried the versions 3.6.0, 3.6.1 and 3.5.5. I am using gradle to build my project in version 4.9
Read more

How to use setInterval in EJS file?

Image
0 I have a problem with using setInterval in my EJS file, which is part of my nodejs app (with Express). I have created function getRandomSubarray , which chooses randomly subset of images from array. I want to change this subset every three seconds. This is problematic piece of my code: <%setInterval(function(){%> <%RandomSubrecipesImg=tools.getRandomSubarray(recipesImg,4)%> <div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[0].replace('public',"")%>"></div> <div class="navbar-image-box col-sm-3 d-none d-sm-block"><img class="navbar-image" src="<%=RandomSubrecipesImg[1].replace('public',"")%>">&
Read more

Petrus Granier-Deferre

Image
Petrus Granier-Deferre (Lutetiae die 27 Iulii 1927 natus; ibidem die 16 Novembris 2007 mortuus) fuit moderator cinematographicus et dux scaenarum Francicus. Pelliculae selectae | 1961 : Le Petit Garçon de l'ascenseur 1962 : Les Aventures de Salavin (sous-titré Confession de minuit) 1965 : La Métamorphose des cloportes 1965 : Paris au mois d'août 1967 : Le Grand Dadais 1970 : La Horse 1971 : Le Chat 1971 : La Veuve Couderc 1973 : Le Fils 1973 : Le Train 1974 : La Race des seigneurs 1975 : La Cage 1975 : Adieu poulet 1976 : Une femme à sa fenêtre 1976 : Le Toubib 1981 : Une étrange affaire 1982 : L'Étoile du Nord 1983 : L'Ami de Vincent 1985 : L'Homme aux yeux d'argent 1986 : Cours privé 1987 : Noyade interdite 1988 : La Couleur du vent 1990 : L'Autrichienne 1995 : Le Petit Garçon 1992 : La Voix 1993 : Archipel 1995 : Maigret et la vente à la bougie (TV) 1996 : La Dernière Fête (TV) 1997 : Maigret et l'enfant de c
Read more