gpt4 book ai didi

html - div,填充视口(viewport)高度至少减去边距

转载 作者:太空宇宙 更新时间:2023-11-04 13:09:14 24 4
gpt4 key购买 nike

enter image description here

我认为图中显示的两种状态是不言自明的。红线具有相同的高度,蓝条具有相同的尺寸。我怎样才能实现这种布局?到目前为止我的尝试(可用于测试):http://jsfiddle.net/n6zYE/

文档类型为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">但可以改为 <!DOCTYPE html> .

问题 是,当内容变大时,我看不出有什么办法可以使红线保持相同的高度,而当内容足够小时,仍然没有滚动条 .

限制 只是,我不想使用不到 90% 的用户支持的任何东西。例如box-sizing幸运的是supported by ~93% of the users .

编辑:我需要一个 box-shadow在黑色区域,所以覆盖不会解决问题。但除此之外,Nulen 还做了一个工作示例 ( http://jsfiddle.net/n6zYE/2/ ) 来说明它的行为方式。

最佳答案

你可以用黑色 div 作为黑色边距来做这种肮脏的方式,内容如下:

#content {
min-height: 100%;
background: grey;
color: white;
width: 500px;
margin: 0 auto;
padding: 20px 0 70px 0;
box-sizing: border-box;
}

http://jsfiddle.net/n6zYE/2/
修改#inside div 的高度以测试不同的内容。

编辑:用 calc() 完成:
http://jsfiddle.net/n6zYE/9/

编辑:完成 overflow: auto;:
http://jsfiddle.net/n6zYE/10/(注意:这并不完全适用于我的 IE11)//nulen

关于html - div,填充视口(viewport)高度至少减去边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24808158/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com