I have two children of the body element. Both the HTML and BODY elements are styled to height:100%. As for the children, the first has a fixed height of 100px and the other is set to height:100%.
HOWEVER, doing this displaces the second child element visually, pushing it down the page and creating a side scroll bar. Effectively, this child IS 100% the height of the body and html tags, but because it comes after the first child of 100px, the entire section is displaced down the page 100px and creates a side scroll bar.
I could use overflow: hidden on the one of the parent elements to clip this excess off, or use a negative margin on the second child to draw it back, but I'd prefer not to.
Ideally, the second element will come directly after the first child, and stretch to the bottom of the window and no more. I want the section#content to respond to viewports, so I don't want to set a explicit height for it either.
I've tried various positioning techniques on the parents and children, but still not what I'm after.
For example, setting the parent element to position absolute and pinning in to all four corners of the screen has no effect on the child elements height. It still maintains the proper height but still is effected by that 100px offset.
Here is some simple HTML:
<body>
<section id="header"></section>
<section id="content"></section>
</body>
I've set the html and body height to 100%, and given #header a height of 100px.
section #content I've given a height of 100%, but the problem is this section expands PAST the window height.
Here is my simple CSS:
html, body{
height:100%;
margin:0; padding:0;
}
section{
margin:0; padding:0;
}
#header{
height:100px;
}
#content{
background:white;
height:100%;
}
Any idea what's going on here? And more importantly, how to fix it??
Cheers
I've added a negative margin-top of -100px to #content (headers height) + added position: relative; to #header. Is that what you're looking for?
Here's a jsFiddle: http://jsfiddle.net/breadadams/1zptzjwr/
Well, you said it yourself what is going on... You are placing a full height element after a 100px height one. So, your document has a height of 100% + 100px. Nothing mysterious so far.
There are many approaches to create this kind of layout. My favorite involves using a display: table layout, that will auto size itself.
But a simple fix would be to use calc() on the second height (if you are not concerned about old IE versions...)
#content{
background:white;
height: calc((100%) - 100px);
}
Viewport-Percentage (or Viewport-Relative) Lengths:
These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).
Try This.Link
Html:
<body>
<div class="wrapper">
<section id="header"></section>
<section id="content"></section>
</div>
</body>
Css:
body{
height:100vh;
margin:0; padding:0;
}
.wrapper {
height: 100%;
}
section{
margin:0; padding:0;
}
#header{
height:100px;
background:blue;
}
#content{
background:red;
height: calc((100%) - 100px);
}
Related
First off, here is a JSFiddle that represents the issue.
I am trying to have a "container" id that is the size of the entire viewport. This is so all div items in #container fit inside the page without scrolling. I assumed thats what height: 100% in html, body, and #container would do.
It seems though, that the .thirdwidth elements height is that of the full viewport, and is not just expanding to the bottom of the #container div (if you inspect the element, it appears that the .thirdwitdh elements go outside the #container)
Does anybody know why this is happening? I would like to be able to have all Sections 0-3 fit on the page without scrolling.
To achieve 100% viewport height you can try 100vh, but why are you placing it's position to absolute.
body {
margin:0;
padding:0;
}
#container {
height: 100vh;
width: 100%;
position:relative;
overflow:hidden;
}
Thanks to #Abbr for this answer (thought I would post a standalone answer so it's not hidden within the comments)
Due to the fact that the gameinfo id is 20% of the parent div, setting the .thirdwidth columns to 100% height made the entire page 120%
Changing the height of the .thirdwidth in my CSS to 80% fixed it!
Why has the div not height:100% ?
http://jsfiddle.net/28V6q/2/
I need the body not to have a fixed height due to jquery ui draggable
html {
height:100%;
}
body {
min-height:100%;
margin:0;
}
div {
height:100%;
background:red;
}
<body>
<div>asdf</div>
</body>
Short answer would be: If the parent's height is not set explicitly, the child height will be set to auto.
This article explains why what you are trying to achieve isn't working: http://www.456bereastreet.com/archive/201306/height_in_percent_when_parent_has_min-height_and_no_height/
This is from the CSS 2.1 specification (which, as far as I know, doesn't differ from CSS3)
The percentage is calculated with respect to the height of the
generated box’s containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to ‘auto’.
The solution would then either be to set position:absolute; on the div or height:100%; on the body.
You should apply height: 100% to body rather that min-height: 100%
An example : http://jsfiddle.net/28V6q/3/
I am trying to use height property using percentages, but it doesn't work. I want to use percentage so it looks fine in any resolution.
<div id="bloque_1" style="height: 80%;background: red">
</div>
How can I make it work?
When you are using % for width, or height, the 1st question you should ask is that 80% of what? So you also need to apply height to the parent element, so assuming that this element of yours is inside the body tag, you need to use this in your CSS
html, body {
height: 100%;
}
So now your div element will be 80% of 100%
Demo
Side Note: Also when you are dealing with absolute positioned elements, you may come across a scenario where your div won't exceed the current viewport height, so in that case you need to have min-height
Everything outside of bloque_1 will need a height as well, or you'll get 80% of 0.
You may also have to apply a height of 100% to the body.
Here's a jsfiddle that shows it in action.
Apply 100% height on your parent element
HTML code-
<html>
<body>
<div id="bloque_1" style="height:80%;background:red;width:100%;">
</div>
</body>
</html>
CSS Part-
html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c }
Working Fiddle - http://jsfiddle.net/SEafD/1/
Demo
html,body{
height:100%
}
#bloque_1{
background:red;
height:80%;
}
I'd like a fixed element's width to match that of the div placed immediately below it. Imagine a header and a main content div. A problem in matching their widths occurs when the header and content divs are nested inside an outer div. In this scenario the % widths of each no longer match their parents width (e.g.,<body> tag) and the fixed element's width is based on something which is confusing me.
To better explain what I mean, contrast these two js fiddles:
http://jsfiddle.net/2dudX/4/
vs.
http://jsfiddle.net/2dudX/10/
here's the code for each:
<div id="fixed"></div>
<div id="content"></div>
#fixed{ position:fixed; z-index:2; width:90%;
height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}
vs.
<div id="main">
<div id="fixed"></div>
<div id="content"></div>
</div >
#main{ width:95%}
#fixed{ position:fixed; z-index:2; width:90%;
height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}
Note only in jsfiddle #1 do the yellow and red divs widths match up regardless of how you resize the browser. Unfortunately, jsfiddle#2 is more of a real world scenario and I'm wondering how to correct the id="fixed" div such that its width also matches up with id="content" div.
Thoughts?
You can to it this way FIDDLE (to set % relative to the #main)
fixed element's dimensions always is calculated relative to the root element, so you need to reset %-unit accordingly
in this particular case you need to set:
#fixed {
width: 85.5%;
}
It is case #main is 95%, your static element is 90% relative to the main. So you need to calculate its width towards the root element (1 * .95 * .9 = .855)
Easy one my friend. Fixed width elements are yanked from their parents and are now relative in width to the window, so in both situations the fixed div is always relative to the size of the window, but when in a parent container with a width other than 100% the fixed element will remain relative to the window width but the non-fixed position element is now relative to the parent width. So the non-fixed element became 90% of the 95% of the window while the fixed element remained a constant 90% of the window only.
Edit:
If you wish to match the widths you can use jquery like this:
$(function(){
$('#fixed').width($('#content').outerWidth());
});
I have html like this:
<div id='content'>
<div id='first'>...</div>
<div id='second'>...</div>
</div>
#content
{
width:100%;
position:relative;
padding:20px;
}
#first
{
width:70%;
position:relative;
}
#second
{
width:70%;
position:fixed;
}
this causes the second div to be a bit wider (40px to be exact) than the first div, because the first div's 70% is with respect to the content's width (which is 100% minus the padding of 20px on each side).
What does the second div's 70% refer to? How could I make it so that the two divs are the same width?
The first div's 70% refers to 70% of the width of #content.
The second div's 70% refers to 70% of the width of the viewport.
If you add this CSS, the two div's are the same width:
html, body {
margin:0; padding:0
}
Live Demo
According to the CSS 2.1 Positioning Scheme spec:
In the case of handheld, projection,
screen, tty, and tv media types, the
box is fixed with respect to the
viewport...
This leads me to believe that the 70% you're setting is actually 70% of the viewport.
As far as making it the same width as the other div, perhaps you could use JavaScript (or specify widths explicitly).
This weird behavior (great question!!) can be referred about the fact that the relative div (first) take the width looking at his father. The second one just look at the viewport, no matter who is its father (and what width is set to its father)!
This can fix your problem:
body,html{
padding:0;
}
Edit -> Fiddle
I set an absolute width using javascript to detect the computed width of #first.