Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set div's height in css and html

Tags:

html

css

I'm using Twitter Bootstrap. I wrote in my html:

<div style="height:100px;" class="span12"> asdfashdjkfhaskjdf </div> 

Why the height is not 100px when I open that page?


For posterity, the original code was : <div height="100px">

like image 392
user1460819 Avatar asked Apr 17 '13 19:04

user1460819


People also ask

How do I set auto height in CSS?

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.

How do I change my height to 100% in CSS?

height:100vh The . box class has only 100vh which is 100% of the viewport height. When you set the height to 100vh, the box element will stretch its height to the full height of the viewport regardless of its parent height.

Can we set border height in CSS?

No, you cannot set the border height.

How do I set height to 100 in html?

Try setting the height of the html element to 100% as well. Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.


1 Answers

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> 
like image 66
Michael Avatar answered Oct 16 '22 18:10

Michael