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/
Related
I have a page with a side navigation bar and a content area.
Here is a simplified representation of what it looks like:
[https://jsfiddle.net/hd46twu1/6/][2]
I'm rewriting the same application using Angular and I'm having a bad time trying to make the content area to stretch to the whole available width.
Here is what is happening:
https://stackblitz.com/edit/angular-89rbp4
How can I make the column to stretch in Angular just as it does on the application without Angular?
You can wrap the main in div with a width of 100% or apply the class directly on main directive
// app.component.css
.full-width {
width:100%
}
in the html :
<div class="wrapper">
<app-navbar></app-navbar>
<div class="full-width" >
<app-main></app-main>
</div>
</div>
A stackblitz example :
https://stackblitz.com/edit/angular-kya7fk?file=src/app/main/main.component.html
PS: you can also apply, height: 100% to stretch it vertically, see updated stackblitz :)
I need an element to take the entire screen's width.
Thus, I put it under .row like so because .container adds 15 px padding, then .row takes it away to be full width again.
.container-fluid
.row
header
.col-xs-12
"content content content"
But when I inspect the header element, its height is 0.
How do I get it to automatically be the height of the contents of .col-xs-12 without hard-coding the pixel values or using javascript?
So a few things:
First of all, as per Bootstrap's docs, "only columns may be immediate children of rows." If you are going to add a header element, make it a parent element of the .row or the .container, or put it within the .col-xs-12.
All .col-xx-xx divs float left, so they are technically taken out of the page flow, which is why your header element has no height--the browser doesn't see its contents as affecting the flow of the page, so it doesn't believe it has a height. Using Bootstrap, you can add the .clearfix class to fix this, though I suggest making sure that you clean up your Bootstrap layout a bit first.
EDIT:
Also (and I suppose this should go without saying, but since your code is sparse -- and in haml?--, I want to make sure that it's true), if your .col-xs-12 has no content in it yet, you won't have a height because there's no minimum height set on a .col-xx-xx divs.
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-xs-12">
CONTENT HERE
</div>
</div>
</div>
</div>
I hope this helps!
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.
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>
I have a simple design. To the left is the navbar, to the right is the content div. I just did float left and float right and it works - unless the monitor is too wide. Then the navbar is far off to the left (like it should) but the content clings to the right. The middle is empty space. I want the content to cling next to the navbar on the left.
How can I accomplish this?
How about floating them both to the left and use percentage values to set their width..
Like below:
#sidebar,#content {float:left;}
#sidebar {width:25%;}
#content {width:75%}
Or if you want to fix the size of your sidebar and have the content fills the rest of the space you can do the following(I use it all the time):
HTML:
<div id="content"><div class="in">
CONTENT HERE
</div></div>
<div id="sidebar">
SIDEBAR HERE
</div>
CSS:
#content,#sidebar {float:left;}
#sidebar {width:300px; position:relative;/*so content won't cover it*/}
#content {width:100%; margin-right:-300px;/*sidebar's width*/}
#content .in {margin-right:300px;
/*sidebar's width or more for space between blocks*/}
There are lots of method to do that.
It depends :
if you want a fixed width layout, or a relative one.
if you want the layout to be centered or not.
etc.
A sketch of what you want or/and your actual code would help.
Anyway, if you're not aware of CSS layout, you could use a CSS framework like blueprint which is easy to use and takes care of your current problem by itself.