This question already has answers here:
CSS Div width percentage and padding without breaking layout
(3 answers)
Margin-Top push outer div down
(8 answers)
Closed 8 years ago.
New to this, so apologies if I missed a crucial lesson in CSS...
I'm trying to do a simple exercise in CSS... a div within a div, both sized with percentages so they respond to a changing window size. Here's my code:
<head>
<title>Percentage Test</title>
<style>
html, body {
height: 100%;
margin: 0;
}
#outer {
height: 100%;
width: 100%;
background-color: yellow;
}
#inner {
height: 90%;
width: 90%;
/* margin: 5%; */
background-color: blue;
}
</style>
</head>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
Everything does just what I thought; the outer div takes up the whole screen and the inner div takes up 90% of the outer div. If I add to this (i.e. add another inner div, change the percentages) everything does what I would expect. If I add a surrounding margin to the inner div (in this case, 5% but commented out), I would expect the inner div to be centered (top/bottom, left/right) within the outer div. It works for the sides and the bottom but not the top. Instead, the outer div is pushed away from the body at the top (I assume 5% but I'm not sure). Any thoughts on why this happens?
Box-sizing will include padding and borders within the widths size.
DEMO
#outer {
height: 100%;
width: 100%;
padding:5px;
background-color: yellow;
box-sizing:border-box;
}
#inner {
height: 100%;
width: 100%;
/* margin: 5%; */
background-color: blue;
box-sizing:border-box;
}
TIPS
Top margins often fail in some browsers.
Use margin-bottom or padding-top to create the vertical space.
Height 100% will not stretch to fit the outer most container without additional hacking.
The div will only be the size of it's content.
This is the way the CSS box model works by default. The dimensions of an object is the set width/height plus any borders/margin/padding.
To have any borders/margins/padding included in the specified width, use the box-sizing:border-box; setting on that element in your CSS.
Related
I've come across numerous question of the similar nature but my situation is a bit different; my outer container is height 100% instead of a fixed height.
I have a bunch of divs inside a container. They overflow and I want to have a scrollbar to allow scrolling.
This is exactly what I want to achieve: http://jsfiddle.net/jcjw2jmo/
Except, the link I posted has a fixed height: 200px;. I want to have a percentage height instead.
I've tried setting a percentage height and max-height with no luck. Here's my progress: http://jsfiddle.net/k52eh0xr/
How do I get both the fiddles to have the same behaviour but with using percentages instead?
Thanks so much
PS. I know this can be done using Javascript/jQuery but I am looking for a CSS-only solution
I think you need set your html and body tag with height:100% so you can use percent like you want
html, body {height:100%}
DEMO
The problem you're having relates mostly to using percentage heights in CSS.
If you're going to use a percentage height on a child element, you need to specify the percentage height for all parent elements up to and including the body and root elements (html).
Try this in your code:
HTML (no changes)
CSS
/* NEW */
html, body {
height: 100%; /* necessary when using percentage heights within body
on non-absolutely positioned children (such as .outer)
more info: https://stackoverflow.com/a/31728799/3597276 */
overflow: hidden; /* prevent vertical scrollbar on browser window,
in conformance with demos posted in question */
}
.outer {
border: 1px solid black;
height: 50%; /* ADJUSTED */
/* max-height: 10%; REMOVED */
overflow-y: scroll;
width: 300px;
}
.inner {
/* height: 10%; REMOVED
max-height: 10%; REMOVED */
}
.item {
background: grey;
border: 1px solid red;
height: 50px;
}
DEMO: http://jsfiddle.net/k52eh0xr/5/
I am a bite confused on what is happening here. I put my body margin set to 0 in my css and then all the div elements stretch across the screen like I want, but I want this to apply for only one. From a previous question: HTML Image going across entire screen
An answer said to use position:absolute and then change the position of the div elements. I used to have position:relative on these div elements and when I changed that to absolute, it combined all the div elements in one position. I tried moving them with bottom:then whatever pixels, but still did not move it at all. Would this be the way to move it? What would I do? On W3 schools: http://www.w3schools.com/css/css_positioning.asp
It tells me a lot about positioning div elements, but when I tried to use this it did not work on one div element I tried, but instead overlapped it.
How would I move these div elements?
Code CSS
#middle-4{
position:absolute;
left:0;
right:8;
bottom:0;
top:-800px;}
Code HTML
<div id="middle-4" style="background-image: url(images/Home/rock.png); height: 540px; width: 1348px; border: 1px solid black;"></div>
This is done so for as you can see up to 4 div elements.
If I understand your question correctly you want all element to conform to the default body margin except one element (or multiple elements using a class).
I would do it like this...
Give body a specific margin to ensure it is consistent across browsers.
Use negative horizontal margins to pull your element outside of the constraints of body
body {
margin: 8px;
background: lightGreen;
}
div {
background: lightBlue;
padding: 30px;
border-bottom: 1px solid blue;
}
.fullwidth {
margin-left: -8px;
margin-right: -8px;
}
<div>I'm constrained by body</div>
<div class="fullwidth">I'm full width</div>
<div>I'm constrained by body</div>
Setting margin on body only ensures cross-browser consistency as mentioned by uʍopǝpısdn
If you have 4 divs containing an image each, you should stick to position: relative - this will line up the divs / images vertically on top of each other.
Your issue might have to do with image sizes - if you want all images to keep their original size, you can keep their attributes for width and height as specified in your example "middle-4": height: 540px; width: 1348px;
However - do you want one div / image to stretch across the width of body / screen, you will have to apply the size in percentage - this can be done in 2 ways:
CSS3 - you have the options of "cover" or "contain", which can be applied to div as youre doing it now - example:
div {
background: url(images/Home/rock.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
CSS2 - you can apply a class to the image itself, and forget about the surrounding div - example:
<img src="images/Home/rock.png" class="img_width" />
.img_width {
width: 100%;
height: auto;
}
This question already has answers here:
Force sidebar height 100% using CSS (with a sticky bottom image)?
(17 answers)
Closed 8 years ago.
I have a issue with the left sidebar.
I would like to make the left sidebar 100% height of the browser always no matter what content is there in right hand panel.
<div class="container">
<div class="leftwrapper">Some text</div>
<div class="rightwrapper">Some text for right</div>
</div>
Fiddle -- http://jsfiddle.net/squidraj/32uppbhy/
Percentage heights are relative, you want the containing element .container to stretch the full height of the viewport, so it needs a height of 100%, but 100% of what? So you also need to set it on your html and body elements. Then simply give your absolutely positioned sidebar bottom:0; to stretch it the full height.
Simply change your CSS thus:
html, body { /* ensure the available document space is the full height of the viewport */
height:100%;
padding:0;
margin:0;
}
.container {
overflow: hidden;
position: relative;
height:100%; /* <-- make the containing element full height */
}
.leftwrapper {
background-color: #0b7582;
bottom: 0;
float: left;
position: absolute;
text-align: center;
top: 0;
width: 8%;
bottom:0; /* <-- anchor the element to both the top and the bottom of the viewport */
}
.rightwrapper {
float: left;
margin-left: 8%;
width: 92%;
}
Add the following rule to the top of your CSS:
html, body, .container, .leftwrapper {height:100%;}
Few elements derive their height from body and html tags as their parent. What you can do is simply create a new css rule for body and html tag with a height property of 100% and then another rule for your sidebar height to be 100%. Hope it works :)
CSS rules:
html,body{height:100%;}
.sidebar{height:100%;}
I am specifying a background color for the body which displays up to a certain distance only. I need it to be full height and for its child elements too. One of its child elements has border-right which also needs to show over the full screen height.
My CSS looks like(sample one) better check my demo
demo page
html,body {
height: 100%;
background-color: #fefefe;
}
.cover {
height: 100%;
}
.left_side {
float: left;
height: 100%;
border-left: 1px solid #ccc;
width: 31%;
}
and html is
<body>
<div class="cover">
<div class="left_side">
</div>
</div>
</body>
and the bgcolor and childs border seems up-to some limited distance only like
what is that problem guys i need that background and border as 100% height.
Remove height:100% from your body and html style.
Instead of having a border set to the left container, try setting the border on the content container instead.
your css would be something like:
.large-9 .columns .right_side{border-left:1px solid #333;}
the left column is currently set to 100% and renders correctly. the problem is that it doesnt take into account the overflow content you cannot see, until you scroll. The other solution would be to absolute or fixed position the left container, and set its top and bottom values to 0.
css for that would be something like:
.left_side .full_height{position:fixed;top:0;bottom:0;width:200px;}
Here's a really basic layout with a fixed left column - http://jsfiddle.net/WAJtk/
and a version with a fixed header too - http://jsfiddle.net/WAJtk/1/
you might also like this pen - http://codepen.io/lukeocom/pen/KqAfG
You could use absolute position and setting top and bottom:
body {
position: absolute;
top: 0;
bottom: 0;
}
I made a simple two-column fluid layout using Bootstrap 2. One column contains two div, and the other contains three div. Both columns are of span6. The fiddle is here.
I attempted to adjust the heights of the two divs in the left column using CSS, so that the top one occupies 62.5% of the browser window height, while the bottom one occupies the rest 37.5%. And similarly for the three divs in the right column. But there are a few questions/problems:
The heights of the blocks/divs do not fill up the window vertically, and the height of each block/div is not changed.
How to make the total height of the two divs on the left equal to that of the three divs on the right, while respecting the relative height ratio within each column (left: 62.5%, 37.5%; right: 35%, 30%, 35%)
How to adjust the paddings between blocks/divs?
I hope all of these can be achieved without any Javascript.
I've tried something, I hope that helps you. So, answers are:
Height of each BlocX div is not changed because you didn't set height of body. In tour case, body have auto height, given by elements inside of body.
Look below.
Those "paddings" are actually margins in class .well. So, avoid that class or override settings.
Finally, we have code like this:
HTML:
Removed class .well, everything else is the same.
CSS:
html{height:100%;}
.body-background {
padding-top: 10px;
background-color: #D1D1D1;
height:100%;
}
.container-fluid, .row-fluid, .span6
{
height:100%;
}
#A-b {
min-height: 62.5%;
height: 62.5%;
background-color: #FFE0C2;
}
#B-b {
min-height: 37.5%;
height: 37.5%;
background-color: #4D4D4D;
}
#C-b {
min-height: 35%;
height: 35%;
background-color: #969696;
}
#D-b {
min-height: 30%;
height: 30%;
background-color: #57BCFF;
}
#E-b {
min-height: 35%;
height: 35%;
background-color: #183547;
}
We give to html and body elements height:100%; and after that do the same to .container-fluid, .row-fluid and .span6. Now we have result like this in DEMO.
NOTE: In resolutions smaller than 768px, use media queries to set height of BlockX and all other elements. Also, don't set height directly on span6, row-fluid etc. This is just example. In live site, use some classes to override classes in bootstrap.