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

Homophylophilia

Image
Haec pagina ad tempus protecta est ob maleficia perpetua. Quaesemus, emendationes suggere in pagina disputationis vel magistratum ad hanc deprotegendam pete. Homophylophilia Hyacinthus complexus ab amante suo Apolline, in pictura Mors Hyacinthi quam Jean Broc pinxit. Homophylophilia est sui sexus vel generis amor vel mores romantici vel sexuales, res venerea masculina in masculos, aut mulier in mulieres appetentes. Hoc ingenium sexuale est "exemplar permanens vel inclinatio ad experiendam sexualem, adfectionalem, vel romanticam vim attrahendi," praecipue vel solum ex hominibus eiusdem sexús; notio "etiam ad hominis iudicium identitatis privatae socialisque in illis attractionibus conditum refert, in moribus quoque qui illos exprimant, et in societate communitatis aliorum qui illos communicent." [1] [2] Per aevos alii aliter rem definiverunt, sed Occidentali nostrae aetatis cultu civili non tantum ad ipsa acta erotica spectat, sed etiam igitur
Read more

Updating UILabel text programmatically using a function

Image
0 so I am trying to update the UIlabel text using a func. I have seen few other questions like mine and I tried their method but it doesn't work. fun returns no value when used in the UIlabel. I have shown my code below.It has to be noted that when I use the function in viewdidload I can retrieve the data. lazy var name: UILabel = { let lb = UILabel() lb.text? = getthename() lb.lineBreakMode = NSLineBreakMode.byWordWrapping lb.textColor = .mainGreen lb.textAlignment = .left lb.font = UIFont.boldSystemFont(ofSize:12.0) return lb }() func getthename() -> String { var wins : String = "" let ud = (Auth.auth().currentUser?.uid) self.ref = Database.database().reference() self.ref.child("Users").child(ud!).observeSingleEvent(of: .value, with: {(snapshot) in
Read more

Cloud Functions - OpenCV Videocapture Read method fails for larger files from cloud storage

Image
0 I created a cloud function to read a video file from cloud storage and read frames and create an image for each frame. This function works for small files which is 1-2 MB, However, this method fails while reading larger file 130 MB. import cv2 from google.cloud import storage vidcap = cv2.VideoCapture("https://storage.googleapis.com/[bucker_name]/[filename.mp4]") if vidcap.isOpened(): vidcap.open("https://storage.googleapis.com/[bucker_name]/[filename.mp4]") success,image = vidcap.read() print(success) Expected the print will return true and an image will hold an image of a first frame. python-3.x function opencv cloud share | improve this question
Read more