代码之家 › 专栏 › 技术社区 › xj9

如何在css中设置浮动div的高度?

css html

xj9 · 技术社区 · 14 年前

我有两个浮动沙发,每个宽50%,问题是我不能让它们伸展到窗户的全高。基本上,我希望每个分区有50%的宽度和100%的高度(但它不起作用)

HTML

<section>
    <div></div>
</section>
<section>
    <div></div>
</section>

CSS

section {
    background: black;
    width: 50%; min-height: 100%; height: 100%;
    margin: 0;
    float: left;
}
section > div {
    height: 100%;
}

2 回复 | 直到 14 年前

Zuul KrapocK 14 年前

假设当您谈论100%高度时,您指的是100%的视图端口,为了对像DIV这样的元素使用100%高度,您还需要将它的container元素设置为100%…最有可能的是,您的body/html标签没有设置为100%,这就是为什么我们将100%高度设置为两个浮动分区似乎不起作用的原因!

前任:

html, body { width:100%; height:100%; }
div#one { float:left; width:50%; height:100%; }
div#two { float:right; width:50%; height:100%; }

这是一个示例CSS代码,还有其他方法可以用更少的代码实现这一点…

希望它有帮助!

Prozaker 14 年前

我想这可能对你有帮助。

http://www.alistapart.com/articles/fauxcolumns/

它指示如何对齐列:)

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前