How is it possible to have a fluid div change it's height according to the content in css alone, or do I have to do it in PHP?
The reason why is because I am making a theme for Drupal and the content will change for each page of the theme.
For example, the middle content div doesn't have a set height, but depending on the article or page length specified in the Drupal back end, the content div will change accordingly.
Amar
If you have a fluid content div in non fluid div, then you must add clear both div after the fluid div, so non fluid div have same height as inner fluid div
<div style="clear:both"></div>
Related
I'm creating a template using bootstrap and the content area is adjusting self according to contents inside it. and if there is less content text then footer and nav gets so closer like see this pic if there is no content text.
image
How can I set minimum height of content so that footer will stay on browser footer and there will be space for content between header and footer.
You could use css like this to set the minimum height to that of the viewport:
minimum-height: 100vh;
The first approach is to make sticky footer when you are using bootstrap, add the class footer in footer wrapper and it will stick to the bottom.
Take a look at the example template provided by bootstrap
Bootstrap sticky footer Template
depending on the content in my page how can I get the footer at the bottom ?
In gridview if i select page size above 20 the footer is overlapping on the gridview box.
I tried the CSS property - position:absolute,bottom:0; as well as overflow:auto...
It dint help the footer is remaining in the same place behind the gridview.can someone pls help me
Thanks.
Check this fiddle:
Format your page layout as in the fiddle. set the min-heightof your container div to
total height - (height of header + height of footer)
(in the fiddle header and footer occupy 15% and 10% height respectively. so the content is given
min-height:75%; // 100%- (15%+10%)
so that it'll always occupy that much space even if your actual content is less.
If your content is more the container div will automatically expand and pull down your footer.
if you apply position:absolute your element will be taken out of the normal flow, then the footer won't be pulled down by the content if it expands.
Take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/5/
Here, I'm stretching the content div to 100% height and it's working fine. However, when I have some really tall content within the content div this happens: http://jsfiddle.net/2YbpZ/2/
As you can see, the content div cuts off at the bottom of the viewport when I want it to carry on with the content inside it.
I know why this happens, because its parent element (html and body) are set to 100% height and it can't go more than that. To fix this I add a wrapper div and now it works: http://jsfiddle.net/2YbpZ/4/
But now there's another problem, when the content inside the content div isn't long enough to stretch outside of the viewport the content div doesn't stretch to the height of the page, like so: http://jsfiddle.net/2YbpZ/4/
So, the question is, how can I adapt this to make the content div always at least 100% height?
Dont use a wrapper, but use min-height:100% instead of height:100% on your #content div.
Note: IE6 does not support min-height.
My website has three components:
a fixed height header that spans the width of the screen
a fixed width nav under the header on the left that spans the remaining height of the screen
a content area to the right of the nav that takes up any remaining space.
I understand how to implement the horizontal aspect of the liquid layout so that the nav remains fixed while the content area takes up remaining width, but I don't understand how to implement the vertical aspect of liquid layout so that both the nav and content area take up at least the remainder of the height and at most the height of their content (assuming that this is taller than the screen less the header height).
Possible with divs?
Yes, it's possible. Take a look at Ryan Fait's sticky footer, and my previous answer to a similar question.
Here you go: http://jsfiddle.net/HcBKV/embedded/result/
There are generally two ways to go about it. One is with setting the height and width to 100%, the other is with stretching by means of position absolute and making it a fixed length from each side.
I'm struggling to create a very simple layout of header and 2 column content - left navigation and right content (http://jsfiddle.net/WsQbs/4/).
What I cannot achieve is having menu and content take 100% height of the page (not just window), while having a vertical line (border) between menu and content. The problem is that when positioning content absolutely and any of the 2 columns have enough content, so that scrollbars appear, the background and border of corresponding divs still only take 100% of the window, not full height of the content.
the absolute position prevent it from you want. is this what you want? http://jsfiddle.net/bingjie2680/WsQbs/6/
update: http://jsfiddle.net/bingjie2680/WsQbs/8/