Html 如何在css和html中设置div的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16068665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set div's height in css and html
提问by user1460819
I'm using Twitter Bootstrap. I wrote in my html:
我正在使用 Twitter Bootstrap。我在我的 html 中写道：
<div style="height:100px;" class="span12">
asdfashdjkfhaskjdf
</div>
Why the height is not 100px when I open that page?
为什么打开那个页面时高度不是100px？
For posterity, the original code was :
<div height="100px">
对于后代，原始代码是：
<div height="100px">
回答by Michael
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.
更“正确”的解决方案是制作一个单独的 CSS 表，将其包含在您的 HTML 文档中，然后使用 ID 或类来引用您的 div。
if you have the file structure:
如果你有文件结构：
index.html
>>/css/
>>/css/styles.css
Then in your HTML document between <head>and </head>write:
然后之间你的HTML文档中<head>，并</head>写入：
<link href="css/styles.css" rel="stylesheet" />
Then, change your div structure to be:
然后，将您的 div 结构更改为：
<div id="someidname" class="someclassname">
asdfashdjkfhaskjdf
</div>
In css, you can reference your div from the ID or the CLASS.
在 css 中，您可以从 ID 或 CLASS 中引用您的 div。
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.
那么在这种情况下，高度将为 150px。
EDIT:
编辑：
To answer your secondary question from your edit, probably need overflow: hidden;or overflow: visible;. You could also do this:
要从您的编辑中回答您的次要问题，可能需要overflow: hidden;或overflow: visible;。你也可以这样做：
<div class="span12">
<div style="height:100px;">
asdfashdjkfhaskjdf
</div>
</div>
回答by NINCOMPOOP
<div style="height: 100px;"> </div>
OR
或者
<div id="foo"/> and set the style as #foo { height: 100px; }
<div class="bar"/> and set the style as .bar{ height: 100px; }
