I'm working on a layout using the 960 CSS grid layout and having some trouble getting my content div to stretch all the way to the bottom, no matter how much content there is.
I have height: 100% on both html and body tags. Usually a min-height: 100% on the content div would work but that does not seem to be the case with the 960 grid.
Any ideas?
Not sure if this answer is still needing to be answered, but I ran into the same problem today working on a wordpress template and solved the problem.
What you have to do is make a wrapper before the container_12 or container_16 that is provided by the grid. You don't need html or body equaling height: 100% at all. You don't even need a min-height on the wrapper.
Make sure that your wrapper doesn't have a height or width set, and put the clearfix on container_12 or container_16 and it should expand all the way down.
I have this working on my wordpress template.
<div id="yourwrapper">
<div class="container_12 clearfix">
<div class="grid_12">
<!-- YOUR CONTENT SHOULD BE COMPLETELY WRAPPED BY THE WRAPPER -->
</div>
</div>
</div>
Related
I have a set up in wordpress using bootstrap what follows:
<div class="container">
<div class="row">
<div id="NEEDS TO BE FULL WIDTH>
</div>
</div>
</div>
I would like the background of the "NEEDS TO BE FULL WIDTH" div be full browser width but not sure how. If I make it more the 100% width it makes a horizontal scroll. Any ideas?
You can have multiple .container elements inside your html. If you change the .container into a container-fluid the content of the container will take up 100%
If you only want the background to be full width, but you want the content to be constrained by the .container (at most about 1140 pixels wide) then surround the .container with another <div> and put the background-image on that element.
How do i go about setting up a full height side bar using a responsive grid system, that is similar to bootstrap?
The issues I am running it to is the .main wrapper div collapses to the height of the .primarycol div.
I 'm using pull and push classes to adjust the visual layout so the .secondarycol div looks like its on the left hand side, even though it is after the .primarycol div in the code.
<div id="main" class="main content">
<div class="row">
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div>
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div>
</div>
</div>
Normally the without the .secondarycol` class, the div would and look like this.
I have tried adding min-height:100% to the .main div and height:100% to the body tag, but that makes the main div height only ever be the height of the browser window and not the content.
Any suggestions on how I can remedy this would be really welcome.
This is the codepen of my base structure.
http://codepen.io/onebitrocket/pen/ZYQLMm/
I've added in the third column as well as some pages require one.
The column system is based on bootstraps, but i think it's an improved version:
The column classes are declared from smallest size to largest size.
I've also changed the class names to indicate the breakpoint size rather then xs,sm,md,lr etc..
Thanks
At least on chrome you need to set the height on the html tag too. Try it - http://jsfiddle.net/27kze60s/
html, body { height: 100%; }
Fixed, thanks to everyone for the suggestions
I've added the following to the css
height:100% to body
min-height:100% to .main
overflow:-y: auto to .secondarycol
I've updated the codepen - http://codepen.io/onebitrocket/pen/ZYQLMm/
I'm using Kube CSS framework to create a demo site at www.dreametry.nl/ddfleurs . It was going well until I came across a problem with the main content background color. On the desktop the white background grows with the content, but not on a mobile device. The problems is the white background stops half way the content.
I tried using several styles, the only changes was with
.content { min-height: 650px; }
But then the background height is too much on mobiles.
Including height: 60%; to the previous code doesn't work.
This can be solved in two ways.
by giving
overflow: hidden
to class="unit-75 content"
or by clearing the div
<div class="unit-75 content" >
<!--All you HTML-->
<div style="clear: both"></div>
</div>
You can use overflow:hidden on the wrapper element (body tag, a particular div etc) to force it to adapt to the height of elements contained IF your layout uses floats.
If I have the following structure, for example, in a single page layout:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
Is it possible to set the minimum height of divs 1-4 to 100%, and position each div one under the other, using CSS alone? Ive created a page where the each div is 100% in height but problems begin to arise when the content of the divs are longer than the browser window. There seem to be a lot of min-height 100% related articles but I haven't found one yet where there is more than one div involved.
For height or min-height to work correctly on a element, the parent of a element needs to have a explicit height declared. This goes all the way up in your DOM tree.
There shouldn't be a difference for rendering one or multiple div elements with min-height as far as I know, so yes it is possible to do the positioning with CSS alone.
See Percentage Height HTML 5/CSS for more details
Ok, I am using the 960.gs and for some design purposes I want a 100% width line with my header elements. But I can't get it to work properly without having to include multiple containers, wich I don't exactly favor.
So my question is this; how can I have a 100% width div on the top of my page, and have the content of that div follow the grid system?
Thank you in advance!
If I guessed this is what you want:
<div style="width: 100%; ...">
<div class="container_12">
your grid layout here
</div>
</div>