I saw there are many similar questions, but I can't find one solution working for me.
My page has this structure:
<body>
<div id="whole_page">
<div id="header"></div>
<div id="main">
<div id="img_container"></div>
<div id="img_container"></div>
<div id="img_container"></div>
</div>
</div>
</body>
My css is:
html,body{
height:100%; width:100%;
padding-top:50px;
}
#whole_page{
height:calc(100%-50px); width:100%;
}
#header{
position:fixed;
height:50px; // header
}
#image_container{
width:100%;
height:30%;
}
I want to set "main" 's height to 100% (window height) minus header height (50px).
Further, I want each div with id "image_container" to be 30% of the "main" div and large 100% of widonws width. So that I have approximately 3 of those div in the page, before needing to scroll.
The problem is that % seem to not work at all. As I didn't write them (tried with Chrome's dev tools).
Actually I am using bootstrap to fill content of header/main but as far as I know this shouldn't give problems with height.
Any clue?
Thanks in advance
Your key problem is that you did not change the height of #main. You also had a miss type between your CSS and HTML, in your CSS you referred to #image_container while in your HTML you used 'id="img_container"'. I change both CSS and HTML to '.img_container' and 'class="img_container"' respectively. I also noticed that you had twice the amount of space at the top than the size needed for your #header since 'padding-top: 50px;' was applied to html and body.
Here is the code:
<div id="whole_page">
<div id="header" style="background-color: yellow;"></div>
<div id="main">
<div class="img_container" style="background-color: red;"></div>
<div class="img_container" style="background-color: blue;"></div>
<div class="img_container" style="background-color: green;"></div>
</div>
</div>
and
html, body {
height:100%;
width:100%;
}
body {
margin: 0;
padding-top:50px;
}
#whole_page {
height: calc(100% - 50px);
width: 100%;
}
#header {
position: fixed;
height: 50px;
width: 100%;
top: 0;
}
#main {
height: 100%;
}
.img_container {
width: 100%;
height: 30%;
}
PS - add color to some of the tags so I could see them. You can just delete the style attribute from the '#header' and '.img_container' tags.
EDIT - Here is a jsfiddle: http://jsfiddle.net/xiondark2008/DJJ2d/
EDIT2 - Just side thought, 'height: calc(100%-50px);' is an invalid property, at least in chrome, however 'height: calc(100% - 50px);' is a valid property, again, at least in chrome.
You can use box-sizing: border-box and padding..
http://jsfiddle.net/jVkL6/
Related
I am having an issue with my divs moving when the page is resized. If you look at the plunker you will see a Header with boxes below. If you resize the workspace by dragging the scroll bar to the left you will see how the page should be. I tried wrapping all items in 1 div named wrapper and tried both relative and absolute positioning with a min-width. I also did the same for body. After inspecting the page with firebug looks like the html tag should have sizing or positioning. That didn't work either (see below). I would like to be able to minimize my screen to 50% and maximize to 250% and keep the same initial layout as if my screen is at 95% based on the wrapper. Any ideas?
Here's plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
you could use percentage and fix min-wheight + set overflow to auto (looks like frameset .. not so nice actually)
Or you could try to relay on box-sizing and use vertical padding on percentage value(it will use parent's width as reference).
floatting pseudo can then, be used and will allow divs to grow taller instead showing a scrollbar.
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
I'm not too sure of what kind of behavior you look for once there is real stuff in your pages.
If you want the header and the two divs to always have their own row, perhaps you could contain them each in divs that are set to width: 100%?
On load I'd like to load the topsection div with a bg image and have it take up the entire screen, but then I have content below it which you can scroll down to. The div should size itself to the window screen only on load and not remain like that on scrolldown. I cannot give the div a position:absolute; either.
I'm banging my head on this one. I've tried a ton of different things
Here is my html:
<div id="topsection" class="row bgimage ">
<div id="logomain" class="mainlogo ">
<div class=" floorplanbuttoncontainer helvetical">
<ul>
<li>Residence A - Duplex</li>
<li>
Residence D - Simplex</li>
</ul>
</div><!-- end floorplanbuttoncontainer -->
</div><!-- end logomain -->
Here is my css for the background image:
.bgimage {
background: url(images/image.jpg) no-repeat center center fixed;
background-size: cover;
.mainlogo {
margin:0 auto;text-align:center;width:100%;height:488px; /*I think this height is messing things up */
background-image:url(images/picture.png);background-repeat:no-repeat;
background-position: center;
}
In order to set a div to take up the entire screen you need to set the height of the body and html element to 100%. You also have to remove the padding and margin from them. Then you create a wrapper class to encase your content and assign it your background-image. Then all ya' gotta do is create the content below your full screen image to scroll into!
Fiddle
Edit
If you run the snippet below and hit full page you can see how it works.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
background: red;
}
.full {
width: 100%;
}
.footerThing {
width: 100%;
height: 200px;
background: blue;
}
<div class="wrapper">
<div class="full">
asd
</div>
</div>
<div class="footerThing">
</div>
Modern browsers: a simple way is to use vh units to get the Viewport Height
Just to simplify: jsBin demo
<div id="home" class="container full">
<h1>HOME</h1>
</div>
<div id="about" class="container">
<h1>About us</h1>
<p>Content</p>
</div>
CSS:
.container { min-height:400px; }
.full { height:100vh; }
Crossbrowser: use % instead of vh and simply add html, body{height:100%;} jsBin demo
I have two divs inside their parent div:
<div>
<div class="col-1"></div>
<div class="col-2"></div>
</div>
.col-1, .col-2 {
width: 50%;
}
They both have width of 50%. Yet they continue to occupy 100% of their parent even though their background is indeed 50% of the parent. Why so?
A div needs to be thought of as a division which, unless you tell it to float, will take all the width of a line, even though it may not fill it, this is because of the inherent css property display:block that's applied to a div. If you tell both divs to float by adding float:left; or float:right; to their css, they will allow other elements to share the width of their parent. Here's a snippet (you can see the result by clicking on the run button) of what it will look like
#container .child{
width:50%;
float:left;
}
.red{background:red;}
.blue{background:blue}
<div id='container'>
<div class='child red'>a</div>
<div class='child blue'>b</div>
</div>
Try this:
.col-1{
float:left;
}
.col-2{
float:right;
}
you can also experiment with the display property, for example display:inline-block could help you
Here is the Example program... You can use "float"
<div id="container" style="width:100%">
<div id="menu" style="background-color:blue; height:200px; width:50%; float:left; color:white;">
Div1</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:50%;float:left;">
Div2</div>
</div>
</body>
</html>
If you want to precisely control the position of a <div>, you should use position: absolute
<style>
.container {
position: relative;
}
.col-1, .col-2 {
position: absolute;
width: 50%;
top: 0;
}
.col-1 { left: 0; }
.col-2 { left: 50%; }
</style>
[...]
<div class="container">
<div class="col-1">[...]</div>
<div class="col-2">[...]</div>
</div>
I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) get shrunk right down, and I can't seem to plump them back up using CSS.
My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.html and css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.css
If I remove the HTML5 doctype declaration, all is as I want it to be,
but I really want to use the proper HTML5 doctype declaration.
If I set the doctype to HTML5 and make no changes, the div with the photo and the footer divs are not visible, presumably because they are 0px high.
If I set the doctype to HTML5 and make the body { height: 100px } and .container { height: 100px } or .container { height: 100% }, it becomes visible, but what I need is it to be is full height rather than a height in pixels.
If I try to do the same as above, but with the body { height: 100% } the photo and footer divs are not visible again.
What do I need to do to get it 100% in height so that my photo and footer divs are full height?
Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.
So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.
See this example, to make it clearer:
html, body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
This wouldn't work, if I didn't give 100% height to—say html element:
body, .outer, .inner, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
… or .inner
html, body, .outer, .content {
height: 100%;
padding: 10px;
margin: 0;
background-color: rgba(255,0,0,.1);
box-sizing: border-box;
}
<div class="outer">
<div class="inner">
<div class="content">
Content
</div>
</div>
</div>
Indeed, to make it work do as follow:
<!DOCTYPE html>
<html>
<head>
<title>Vertical Scrolling Demo</title>
<style>
html, body {
width: 100%;
height: 100%;
background: white;
margin:0;
padding:0;
}
.page {
min-height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="nav" class="page">
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="page1" class="page">
<h1><a name="about">about</a></h1>
About page content goes here.
</div>
<div id="page2" class="page">
<h1><a name="portfolio">portfolio</a></h1>
Portfolio page content goes here.
</div>
<div id="page3" class="page">
<h1><a name="contact">contact</a></h1>
Contact page content goes here.
</div>
</body>
</html>
I got stuck into a similar problema to size a canvas, so here is what i did and worked perfectly.
Besides doing the:
body{ width: 100%; height: 100%;}
Set the desired element like this:
.desired-element{ width: 100vw; height: 100vh}
In that way you are assured to have 100% of the view port in width and height.
vw stands for viewwidth
and
vh stands for viewheight
I hope this helps someone
I need the center div div#b to fill out the gab between div#a and div#c.
<div id="a">
<span>Div1</span>
</div>
<div id="b">
<span>Div2</span>
</div>
<div id="c">
<span>Div3</span>
</div>
I tried to do this by placing width: 100% on div#b but without luck.
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
float:left;
width:100%; ?? <!-- Doesn't work!!! -->
}
div#c
{
float:right;
width:50px;
}
How can I get div#b to expand from div#a to div#c?
There can be no line breaks.
CSS3
You can implement this dynamic behavior using the CSS3 Flexible Box Layout Module:
<style type="text/css">
div.Container
{
width: 100%;
display: box;
display: -moz-box;
display: -ms-box;
display: -webkit-box;
}
div.B
{
background: magenta;
box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex: 1;
}
</style>
<div class="Container">
<div style="width: 50px; background: cyan;">
A
</div>
<div class="B">
B
</div>
<div style="width: 50px; background: yellow;">
C
</div>
</div>
A new version of FireFox, a new version of Google Chrome, Internet Explorer 10 and a new version of Safari supports CSS3 flexible box layout. Internet Explorer 9 and Opera is lacking support at the moment.
I also want to mention this new way to do it in FireFox:
<div style="float: left; width: 50px; background: cyan;">
A
</div>
<div style="float: left; width: -moz-calc(100% - 100px); background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
FireFox is the only browser that support the calc function at the moment.
CSS2
Here is the old way to do it:
<div style="padding-left: 100px;">
<div style="float: left; width: 50px; margin-left: -100px; background: cyan;">
A
</div>
<div style="float: left; width: 100%; margin-left: -50px; background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
</div>
A width of 100% inside the container div is the width of the container minus the 100px left padding. Then there is room for the left and right 50px div elements. Then you have to position them using some negative margin and floating.
Feature detection
Use feature detection with Modernizr. Then you can use CSS2 for browsers that lack support for CSS3 flexbox.
If you do .NET development you can download Modernizr with NuGet.
I've hit similar problems myself. The problem here is "width: 100%" will basically inherit the width of the parent container.
The other problem is the float. When you ask div#b to float to the left alongside div#a, you can't use the fancy margin trick to force div#b to stay out of the way of div#a. (In other words, margin can be used to keep div#b from entering and interfering with a certain amount of space on any of its sides.) However, with float, the margin is now not pushing div#b away from the edge of the page, but away from the edge of div#a.
OK, so the solution looks like this. Remove the float on div#b, and then apply left and right margins so div#b doesn't interfere with either side columns. Let div#b determine its own size (i.e. don't give it a "width"), so it will fit between the two floats. Lastly, shift div#b so that the floats occur before div#b is put in place, so that div#b is put between the floats.
Here's the new code:
<style type="text/css">
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
margin-left: 55px;
margin-right: 55px;
}
div#c
{
float:right;
width:50px;
}
</style>
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
Determining margins is tricky. Borders aren't counted in the width calculation of an element, so a 50px-wide div with a 1px border is actually 52px-wide.
I have a feeling you won't like this answer, but the easiest way to do it is to remove float: left and any width from div#b, and then switch up the order of your divs, so both the sidebars are before your main content area. Here's the code:
HTML:
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
CSS:
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
overflow: hidden;
/*margin: 0 60px;*/
}
div#c
{
float:right;
width:50px;
}
Note that I've applied overflow: hidden to the middle div - this will force it into columns (in most browsers). You could use the given margins instead, if you're not comfortable with a "magic" solution (there is a reasonable explanation for it, but I can never remember it off the top of my head).