gpt4 book ai didi

浏览器调整大小时 CSS 100% 宽度

转载 作者:技术小花猫 更新时间:2023-10-29 11:20:23 24 4
gpt4 key购买 nike

大家好,我正在尝试使用 CSS 构建布局,但遇到了一个奇怪的问题。对我来说很奇怪。我有 3 个 div,一个 Header、一个 Footer 和一个 MainContent 区域。 Header 和 Footer 必须保持 100% 的恒定宽度,而 MainContent 区域必须居中固定在 996px;这一切都很好,但是当我将浏览器窗口的大小调整为低于 996px 的宽度,然后向右滚动窗口的内容时,100% 的页眉和页脚似乎被截断了,不再是 100%。我编写了一个简单的脚本来说明这个问题(样式内联以保持紧凑)。我知道我可以添加 overflow:hidden 到每个容器,以便在调整窗口大小时关闭滚动条。我还写了一小段 jQuery 来强制 div 返回宽度,如果宽度低于某个宽度。但是我的问题是关于 CSS 的,是否有更好的纯 CSS 解决方案来解决这个问题?或者有人可以解释为什么会这样吗?先感谢您!点C

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div width test</title>
</head>
<body style="border:none; margin:0; padding:0; height:100%; width:100%">

<div id="header-content" style="width:100%; margin:0; padding:0; background-color:#0000ff; height:50px"></div>

<div id="main-content" style="width:996px; margin:0; padding:0; background-color:#ff00ff; height:250px; margin:auto">
<div id="inner-content">
CONTENT OF THE PAGE HERE
</div>
</div>
<div id="footer-content" style="width:100%; margin:0; padding:0; background-color:#00ffff; height:70px"></div>
</body>

最佳答案

我不是很清楚你的问题,但你可以在页眉和页脚上设置 min-width:996px; 以保持它们至少与内容一样宽。

关于浏览器调整大小时 CSS 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3805150/

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