How to set div's height in css and html
To write inline styling use:
<div style="height: 100px;">
asdfashdjkfhaskjdf
</div>
Inline styling serves a purpose however, it is not recommended in most situations.
The more "proper" solution, would be to make a separate CSS sheet, include it in your HTML document, and then use either an ID or a class to reference your div.
if you have the file structure:
index.html
>>/css/
>>/css/styles.css
Then in your HTML document between <head>
and </head>
write:
<link href="css/styles.css" rel="stylesheet" />
Then, change your div structure to be:
<div id="someidname" class="someclassname">
asdfashdjkfhaskjdf
</div>
In css, you can reference your div from the ID or the CLASS.
To do so write:
.someclassname { height: 100px; }
OR
#someidname { height: 100px; }
Note that if you do both, the one that comes further down the file structure will be the one that actually works.
For example... If you have:
.someclassname { height: 100px; }
.someclassname { height: 150px; }
Then in this situation the height will be 150px.
EDIT:
To answer your secondary question from your edit, probably need overflow: hidden;
or overflow: visible;
. You could also do this:
<div class="span12">
<div style="height:100px;">
asdfashdjkfhaskjdf
</div>
</div>
Setting a div's height in HTML with CSS
Ahem...
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div
, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".
Set div height to fit to the browser using CSS
Setting window full height for empty divs
1st solution with absolute positioning - FIDDLE
.div1 {
position: absolute;
top: 0;
bottom: 0;
width: 25%;
}
.div2 {
position: absolute;
top: 0;
left: 25%;
bottom: 0;
width: 75%;
}
2nd solution with static (also can be used a relative) positioning & jQuery - FIDDLE
.div1 {
float: left;
width: 25%;
}
.div2 {
float: left;
width: 75%;
}
$(function(){
$('.div1, .div2').css({ height: $(window).innerHeight() });
$(window).resize(function(){
$('.div1, .div2').css({ height: $(window).innerHeight() });
});
});
Set div height to window height
Removing the margin and padding will help, you can also add box-sizing: border-box;
to account for borders and padding when setting widths. Also I'm not sure if you wanted to make your footer stick to the bottom of the page, but I did that along with the other fixes in this fiddle:
http://jsfiddle.net/ob1g0752/2/
HTML Can't Change Height of Div
That is because you don't have a height to the board and the 30% of almost 0 is... 0.
Add some height to the div with the id of board
.
Add this to your css:
html {
background-color:black;
color:white;
text-align:center;
}
#board{
height:300px;
}
.cell {
border: 1px solid white;
margin:1px;
width:30%;height:30%;
}
Div height 100% and expands to fit content
Here is what you should do in the CSS style, on the main div
display: block;
overflow: auto;
And do not touch height
How can I expand floated child div's height to parent's height?
For the parent
element, add the following properties:
.parent {
overflow: hidden;
position: relative;
width: 100%;
}
then for .child-right
these:
.child-right {
background:green;
height: 100%;
width: 50%;
position: absolute;
right: 0;
top: 0;
}
Find more detailed results with CSS examples here and more information about equal height columns here.
How to set the height of divs in basic layout
You can add a position: absolute
to the parent div
and subsequently stretch it to achieve full width and height. Note that the width: 100%
declarations are important to enforce block-level formatting context.
<div style="position:absolute; overflow: hidden; top:0; left:0; right: 0; bottom: 0;">
<div style="background-color: blue; height: 70%; width: 100%;">Top</div>
<div style="background-color: red; height: 30%; width: 100%;">bottom</div>
</div>
Here's the fiddle
Just note that this will remove this div from 'normal flow', and that sibling elements will be obscured/obscuring. The CSS 2.1 spec provides this advice:
...the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
Set a div height from its width (and vice versa)
You can use CSS aspect-ratio
to maintain the ratio.
width: {{ templateWidth }}%;
height: {{ templateHeight }}%;
aspect-ratio: {{ templateWidth }} / {{ templateHeight }};
Then you can fix either the width
or the height
and set the other one to auto, for example:
width: 100%;
height: auto;
or the other way around:
width: auto;
height: height;
Related Topics
What Is the ::Content/::Slotted Pseudo-Element and How Does It Work
Difference Between Position:Sticky and Position:Fixed
How to Set Style to Title Tag in Header
Why Does a Filter Gradient on a Pseudo Element Not Work in IE8
Make Columns of Equal Width in <Table>
Using Z-Index to Get Div Above Another Div
How to Justify a Horizontal List
Is There a Max Size to the Length of a Hidden Input in HTML
Upload a Whole Directory Through an HTML Form
Easiest Way to Extract the Urls from an HTML Page Using Sed or Awk Only
Retrieve Image from Ftp to Webpage
HTML Combo Box with Option to Type an Entry
CSS Only Animate Draw Circle with Border-Radius and Transparent Background
Right Align an Image Using CSS HTML