Now, the title may make sound like the laziest question but bear with me.
The approximate structure of my site is of the format:
<html>
<head></head>
<body>
<div class="navbar"></div>
<div class="container"></div>
</body>
</html>
The view is styled by bootstrap, and the overriding css is placed in
app/assets/stylesheets/bootstrap_and_overrides.css.less
Now, I have tried changing the height and min-height of the body and container like this;
body {
min-height: 100%;
}
.container {
min-height: 100%;
}
etc, but the outcome is unexpected.
If I increase the height of container to exceed the height of body, it simply overflows the boundaries of body, instead of body growing accordingly to match it. In a similar manner, if I decrease the height of body to fall below the height of container, the container will not shrink to match body.
I am not very proficient in CSS so I might be overlooking something very fundamental here, so any help or pointers are appreciated.
Try this,
body {
height: 100%;
}
.container {
height: 100%;
}
or,
body {
max-height: 100%;
}
.container {
height: 100%;
}
Related
So I am looking at this website because I really like the design and I want to make something similar. I see that every section fits 100% of the viewport and they achieved this in a weird way.
They had a "div section-background" inside each section. And that "div section-background"'s position is relative to each section. Then they set the background colour.
My question is why couldn't they just direction set the background colour to each section. Say the website has 6 sections. Couldn't they just do something like:
<body>
<section class="section1">
<section class="section2">
.....
</body>
CSS:
body, html {
height: 100%;
}
body section {
width: 100%;
min-height: 100vh;
}
.section1 {
background: blue;
}
.section2 {
background: red;
}
It gives the same result. Is there an advantage to the way they did it?
Hope this makes sense.
Thanks
You were almost there.
1st, you didn't close your section tags. Maybe just because of the description.
https://jsfiddle.net/jhe3daq0/2/
Use width and height 100% on the container and ALL the parents to achieve that. VH and VW will help/work too but the scroll bar screws up the layout once it displays.
html, body, section {width: 100%; height: 100%;}
Lets see
you need to make body use 100% of width and height
to achieve you start with this:
body {
width:100vw; // viewport units FTW
height: 100vh;
}
so now you can style you section, for this you can use the same with a lil diference
section {
width:100vw; // viewport units FTW
max-width:100%; // so no horizontal scroll apears when vertical scrollbar is showing
height: 100vh;
}
hope this helps
You can also also the same which you did, with "vh"
body section {
width: 100%;
min-height: 100vh;
}
I have a div I want to extend to the bottom of the page. The standard approach for this seems to be to set the min-height to 100% for the div you want, the body, and the html. I have done this, however, browsers (tested on both firefox and mobile safari) don't seem to care. Simplified code:
<html>
<head>
<style>
html{
min-height: 100%;
position: relative;
}
body {
min-height: 100%;
position: relative;
}
#main {
min-height: 100%;
overflow:hidden;
}
</style>
</head>
<body>
<div id='main'>
<p>content</p>
</div>
</body>
</html>
A closer inspection with firebug reveals that it reads the css is read, and says that it computed a height of 986px for html and body elements (on a 1080p monitor), but only 517px for the div. What's really weird though is that the layout tab seems to indicate the height of the body element is only 517px, even though it computed it should be 986px.
So the browser knows what the height should be, but refuses to actually set it. What the actual ...
EDIT: I came across a similar question, which was answered with the suggestion one uses vh instead of percentages. This worked for the body and html tags, but when used on the div it makes it longer than the page because there's actually a header above the div. So I'd use percentages, but they result in the same issue I had with body originally: it's read, computed, but not executed.
The code in the first comment did the trick. I have no idea how, but it works now. Leaving the code here for future reference:
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
display: flex;
flex-flow:
column nowrap;
}
#main {
flex: 1;
}
Thanks, Anton Strogonoff!
Please try this code may be it's help you.
<div id=fullheight>
Lorem Ipsum
</div>
* { padding: 0; margin: 0; }
html, body, #fullheight {
min-height: 100% !important;
height: 100%;
}
#fullheight {
width: 250px;
background: blue;
}
I am trying to put a div on the left side of my webpage that has not to be fixed and has to be 100% of the height and 30% width. I mean, that if you scroll, it will be scrolled also and it will not be fixed in the same position all the time.
The problem that I am having it is that when I put height: 100%; it does not cover the height that I am indicating to him. It only covers the full height when I set position:fixed but never when I set it to static, absolute or relative.
What I though it is that it could be that I had to set width: 100%; and height: 100%; to the <html> tag but it does not seem to have any difference if I compare it with <body> tag (I know there are differences between both tags but I do not know if in this case they will be aplied, I think no).
Here is my html code:
<html>
<head>
</head>
<body>
<h1>This is a prove</h1>
<div id="proveDiv">
<h1>Hello</h1>
</div>
</body>
</html>
Here is my CSS code:
html{
/* position: relative; I comment these lines because I saw that there are not any effect
width: 100%;
height: 100%; */
}
body{
position: relative;
width: 100%;
height: 100%;
}
#proveDiv{
position: fixed;
width: 30%;
height: 100%;
background-color: red;
}
Here is the fiddle in which you can see the effect. Just try to change the position attribute on proveDiv id css and you will se what I refer to.
I am stuck here and I cannot find any solution by myself or in SO. Am I missing something?
Thanks in advance!
Set the min-height of the div to view-port height like min-height: 100vh;. Updated fiddle
#proveDiv {
width: 30%;
min-height: 100vh;
background-color: red;
}
Based on your description, this is the working demo that I came up with.
http://codepen.io/BenCodeZen/pen/JXLbjN
The solution is based on a display: flex; on a parent container and defining the height of the element using height: 100vh; instead of 100%. By using flexbox, it will allow you more control over the layout for responsive design.
Let me know if you have any questions.
The reason why this happens is because, when you use the attribute fixed, for some reason, the div's height will increase because it's inherited by default from its container. In this case, when your div is fixed and its height is set to 100%, the div takes the full height of its container which is the body.
PS: In case you want the div to have its initial height, you can use position:initial.
On the other side, using position:relative is your best option.
By default, the div will have its own initial height which depends on its content. When you have more text inside your div, it will automatically increase its height.
To solve your problem, use a relative position and set the height as you want. (100% will make the div take the height of the body)
Note that it is important that you set both the body & html tag's height otherwise it won't work. (If you need further explaination, just comment below)
This is how your CSS should be:
html,body{
width: 100%;
height: 100%;
}
#proveDiv{
position: relative;
width: 30%;
height: 100%;
background-color: red;
}
If you have any questions, comment below.
This is my code.
<!DOCTYPE html>
<html>
<head>
<style>
html, body { min-height: 100%; }
</style>
</head>
<body>
</body>
</html>
Chrome, Firefox, and Safari inspectors all show the html element with height equal to the browser window as should be the case, but the body element with height 0. Setting the height (not just min-height) of the body element to 100% doesn't help. The body element should have height equal to 100% of its parent element, the html element, which has height equal to the window. So why doesn't it?
Try restricting its height to always only be 100% using height and min-height, like so:
html, body {
min-height: 100%;
height: 100%;
}
WORKING EXAMPLE
Another possible way is to give the parent (in this case, the html tag) a height of 100%, and then give the child (body tag) the min-height, like so:
html {
height:100%;
}
body {
min-height: 100%;
}
WORKING EXAMPLE
Here is a similar question to yours that can answer some more indepth questions - Make body have 100% of the browser height
The reason this does not work is percentage based height vales require that the height be set on the parent element (except for the html node, which is based off the viewport). While the browser will always render the html node as the full browser, you actually need to set the height in CSS for the body to base the percentage off of. I believe what you are looking for is the following.
html {
height: 100%;
}
body {
min-height: 100%;
}
JSFiddle
This is a cleaner solution to setting both body and html to height: 100%; as the body will commonly be larger than 100% of the viewport.
I think it is working .Add bgcolor to your body element and see if it is 100%. I tried following code which is working -
<!DOCTYPE html>
<html>
<head>
<style>
html, body { min-height: 100%;}
</style>
</head>
<body bgcolor="#00CC33">
<div>HELLO</div>
</body>
</html>
Restricting the height to always be the height of its parent element will work but you need to add a light CSS reset:
html, body{
min-height:100%;
height:100%;
padding:0;
margin:0;
}
For a full CSS reset see normalize.css
As to why min-height is not working, see: child inside parent with min-height 100% not inheriting height
Also note, using body,html { height: 100% } instead, works fine.
http://jsfiddle.net/ND74j/
This is something I recently came across and was able to resolve with this:
body {
display: inline-block;
min-height: 100vh;
width: 100%;
}
// this class is a div containing all your page's content
.body {
width: 1400px; // arbitrary number
margin: auto;
}
I'm trying to create a div that will expand to 100% of the screen height when there is not enough content for it to do so normally, but will expand normally beyond that if there is enough content. If my div is called container, then whenever I use
#container
{
min-height: 100%;
}
it seems to have no affect on the height at all. When I use
#container
{
height: 100%;
min-height: 100%;
}
it sets the height to a fixed 100%, cutting off any content that would normally be past 100% of the screen height. I'm not sure what I'm doing wrong.
You can try
body, html {
height: 100%;
}
Borrowed from this answer. You can also refer this.
Fiddle
Maybe could you give us a JSfiddle of your HTML ? It would help us helping you.
I think you could use:
#container
{
height: 100%;
overflow: auto;
}
Or play around with position/float/clear.