gpt4 book ai didi

css - DIV 100% 高度内的可调整大小的 DIV,周围的边距效果不佳!请帮忙?

转载 作者:可可西里 更新时间:2023-11-01 13:12:52 26 4
gpt4 key购买 nike

这是一个常见问题,但与我找到的解决方案略有不同,我一直在尝试解决它但没有成功,所以如果有人能在这方面给我帮助,我将不胜感激。

我有一个 #wrapper div,它延伸到浏览器的 100% 宽度和高度。到目前为止,一切顺利......现在,在#wrapper 中,我需要一个#content div,它会自动拉伸(stretch),父div 周围保持30px 的边距。我(几乎)设法做到了,但我无法使#content div 的高度拉伸(stretch)。这是我正在尝试做的一个例子:

example

这是我的 CSS 代码:

* {
margin: 0;
padding: 0;
outline: 0;
}

html, body {
height: 100%;
width: 100%;
text-align: center;
cursor: default;
}

#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
position: absolute;
background: #333;
text-align: center;
}

#content {
/*width: 100%;*/
min-height: 100%;
height: auto !important;
margin: 30px;
overflow: hidden;
background: #ccc;
}

这是 HTML:

<body>

<div id="wrapper">

<div id="content">
This DIV should stretch to 100% height of its parent and body
minus the 30px margin around and resize as the window is resized.<br />
It's working in width but not in height!<br /><br />
Whatever goes in here (a child DIV) no matter its size should not be
visible beyond this DIV boundaries (as the Overflow is set to "hidden")!
</div>

</div>

</body>

这就是我在 Chrome 和 IE 中得到的结果:

current result in Chrome and IE

有什么帮助吗?是否可以?我错过了什么愚蠢的东西吗?

提前致谢,LM

最佳答案

在您的 .css 中,将 #content 替换为以下内容

#content {
overflow: hidden;
background: #ccc;
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
}

关于css - DIV 100% 高度内的可调整大小的 DIV,周围的边距效果不佳!请帮忙?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17263982/

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