I have a element (represented as aside) that I need to span the full height of the page. However, the height is appearing to be ineffective with "height 100%".
Here is the fiddle: http://jsfiddle.net/h18ctmfq/
aside{
width:300px;
float:left;
background-color:#808080;
height:100%;
}
Add this
html {
height: 100%;
}
JSiddle Demo
Related
I have a main div that contains two other divs. I need that the first one must have the same height of the parent div. The parent div height is not specified in CSS.
Here's an example: http://jsfiddle.net/x8dhnh4L/
The pink div must expand to the full height of the parent (red border).
One solution I tried is using display:flex, but it's not IE-friendly (I need a IE8+ compatibility). Plus I'd like to achieve this with CSS only, so I'm avoiding JS.
You could try using a table layout:
set display:table on the parent
set display:table-cell to the childs that need the same height
#container {
position: relative;
width:600px;
border: 1px solid red;
display:table;
}
#content {
display: table-cell;
background-color:pink;
width:400px;
}
#side-bar {
display:table-cell;
background-color:yellow;
width:170px;
padding-left:25px;
vertical-align: top;
}
here's a working fiddle:
http://jsfiddle.net/x8dhnh4L/2/
As noted in the comments, margins do not work in elements with display:table-cell. If acceptable, you can use padding-left instead of margin-left...
You could also add an additional <div> to separate the 2 columns by 25px.
http://jsfiddle.net/x8dhnh4L/1/
Set side bar to
float:right;
and set content
height:100%;
A quick solution is to use display:table for #container and height:100% for #content.
http://jsfiddle.net/afelixj/x8dhnh4L/5/
If you actually want the "#content" div to expand to "#container" height, you need to set a height for parent div "#container" and height and float for "#content"
#container {
position: relative;
width:600px;
border: 1px solid red;
height: 800px; //whatever height you need
}
#content {
display: inline-block;
background-color:pink;
width:400px;
height:100%;
float: left;
}
This way "#content" height will adjust to "#container" height, but "#side-bar" will take the height it needs to show it's content.
With Hanoncs solution the parent div "#container" will adjust to child's div "#content" height.
An easy way around this is using display: table; declaration on the parent element and display: table-cell; declaration on the child element.
I would recommend reading Equal Height Columns with Cross-Browser CSS and No Hacks.
Hope this helps!
I have a Div with auto height and 100% width .Now inside this Div I have to display one more Div with remaining width available in the parent Div and 100% height (Div Should be displayed in full page after the button of the parent Div got ended).Also i want to show the Second Div with border so that any one can know the expansion of the DIV by seeing it.
Here is the css that i am trying to add for border in Div..
border: 2px solid;
border-radius: 25px;
Border is coming in the Div but Div is not getting displayed in Vertical .Its getting displayed in horizontal..Here is the Fiddle Link..
FIDDLE
Please help to resolve it ..
Thanks ..
Not 100% sure I got your request. Here's my guess:
.verticalDiv
{
position:relative;
height:auto;
width: 100%;
border: 2px solid red;
}
#computationOperation
{
position:relative;
width: 100%;
display:block;
min-height: 100px;
height: auto;
}
The Fiddle
Let me know it that helped!
Done entirely understand what you are trying to do, but is this what you are looking for?
http://jsfiddle.net/5pqqeuhy/
body, html{
height:100%;
}
.verticalDiv
{
position:relative;
height:100%;
width: 100%;
}
.computationOperation
{
position:relative;
height:100%;
width: 100%;
}
you need to set the height of html and body to 100% because by default they do not expand to the full height of your browser
What I am trying to do:
Set the <body> tag as display:table and my header/content/footer as display:table-rows. I also want <body> to be the size of the screen, the child elements will show scrollbar if needed.
I do this by setting
body{
display:table;
height:100%
}
This works in chrome, but in firefox the height of the body is the height of the screen. Is this as expected or is this a firefox issue? Is there a way to achieve this while using table? It used to work without table, but I need the footer to not appear on occasion, so I need my content to grow as needed, and it seems to work nicely in chrome.
You can see this on my (alpha) site at sportmenow.com
I've provided two solutions below, the first is more structured, the second follows your design pattern.
Demo Fiddle
Why not implement more structured HTML which follows a more semantically correct pattern and structure of table->row->cell:
<header>
<section></section>
</header>
<article>
<section></section>
</article>
<footer>
<section></section>
</footer>
CSS:
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:table;
}
header, footer, article {
display:table-row;
width:100%;
height:100%;
}
header, footer {
height:50px;
background:black;
}
section {
display:table-cell;
width:100%;
}
section:nth-child(2) {
height:100%;
}
However.. If you dont care about this so much, you can simply use display:table on your body element and then the below- the limitation being that each section will collapse unless it has content (even only nbsp;)
Demo Fiddle
HTML
<header>headerContent</header>
<article>mainContent</article>
<footer>footerContent</footer>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
body {
display:table;
}
header, footer, article {
display:table-row;
width:100%;
height:100%;
}
header, footer {
height:50px;
background:black;
}
You can specify the height of a display:table element in firefox. However, to use the full browser window, you may have to specify the height of the html element too:
html { height:100%; }
fiddle
Following this bug report, https://bugzilla.mozilla.org/show_bug.cgi?id=26617#c14, it seems when the element is using display: table-row, Firefox treat height as min-height, that's why you only found problem in Firefox.
On the other hand, if you already know the height of your header / footer before hand, you could use position: fixed with fix value in top and bottom attribute to layout your page instead.
In short, please try replace your CSS on your .body and .footer like this.
.body {
display: block;
position: fixed;
width: 100%;
top: 60px;
bottom: 92px;
padding: 6px;
}
.footer {
display: block;
position: fixed;
height: 70px;
width: 100%;
bottom: 0;
text-align: center;
border: 1px solid #CCCCCC;
background: #FFFFFF;
}
This will work consistently on both Firefox and Chrome.
However, when you hide your footer, you will need to use javascript to update CSS attribute "bottom" to 0 on your .body element.
$('.body').css({'bottom':'0'});
To set any element to 100% of its parent's height, the parent element must have a defined, non-percentage height (px, em, etc.), or it an all ancestor elements must be 100% height. For example, if your element was the first child of the body, you could set it to 100% height with the following CSS:
html, body, #my_element {
height: 100%;
}
If you were to set a parent to a specific height, then the target element to 100%, the target element would be that height as well. Imagine you had an element with an ID of element_parent, that contained your target element:
#element_parent {
height: 500px;
}
#my_element {
height: 100%;
}
In the above example would mean that my_element would expand to the full 500px that its parent is set to.
i created a main div and split-ted into two css code
#main { background-color:#FFFFFF; width:1000px;}
#left { width:750px; float:left }
#right { width:250px; float:right }
but background color does not changes , when i changed it to
#main { width:1000px;}
#left { background-color:#FFFFFF; width:750px; float:left }
#right { background-color:#000000; width:250px; float:right }
it works but when height changes it looks boring i want to change the background color of whole main div.
what about if your main div gets a
#main {
min-height:100px;
max-height:100px;
}
it needs a height to display background-color
if its not working show the html part please
Without the html this is just a guess, but I think your problem is that the div#main has a height of 0. This happens because the floating divs inside are no longer part of the document flow. Try setting a height on the main div, this should fix it.
Add following rule
#main:after { content: " "; display: block; overflow: hidden; clear: both; height: 0; }
It will clear floats and make the container as high as the highest column inside.
I have a div with a height of 100% and a solid border. when i have too much content, it will display outside the div border.
how do i expand the div to the height of all the content inside the border instead of just 100% of the screen size?
the height:100% seems to be measuring the screen height but not the content inside of it.
<style>
#container{
height:100%;
width:100px;
border:1px solid black;
}
</style>
<div id="container">
link to problem sample page
Such a problem can be easily solved using the elusive clearfix! First off, remove all those height:100%; declarations you have for your #container, they're not needed, and try this in your CSS:
#container:before, #container:after {
display: table;
content: "";
zoom: 1;
}
#container:after {
clear: both;
}
absolutely positioned elements do not change the height of their container. Your farbartastic element has absolute positioning, so it will be laid out without informing its container of its height requirements.
You have some problems with yours floating element (which are flying outside the container), so , for correct this use overflow:hidden in the container
#container{
width:100px;
border:1px solid black;
overflow: hidden;
}