CSS浏览器的100％宽度调整大小 [英] CSS 100% width on browser resize
问题描述
您好，我正在尝试使用CSS构建一个布局，我碰到一个奇怪的问题。对我来说很奇怪。我有3个div a 标题， Footer 和 MainContent 区域。页眉和页脚必须保持在100％的恒定宽度，而MainContent区域必须居中固定在996px;这很好，但是当我调整浏览器窗口的宽度低于996px，然后滚动窗口的内容，100％的页眉和页脚似乎被截断，不再是100％。我敲了一个小骨头脚本来说明问题（样式内联，保持紧凑）。我知道我可以添加overflow：hidden到每个容器，以关闭滚动条时，窗口调整大小。我也写了一小块jQuery来强制div返回
的宽度，如果宽度降低到一定宽度以下。但是我的问题是围绕CSS，是否有一个更好的纯CSS修复这个问题？或者任何人可以解释为什么会这样？
提前谢谢！
DotsC
< html xmlns =http://www.w3.org/1999/xhtml> ;
< head>
< meta http-equiv =Content-Typecontent =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-contentstyle =width：100％; margin：0; padding：0; background-color：＃0000ff; height：50px> div>
< div id =main-contentstyle =width：996px; margin：0; padding：0; background-color：＃ff00ff; height：250px; margin：auto>
< div id =inner-content>
此页面的内容
< / div>
< / div>
< div id =footer-contentstyle =width：100％; margin：0; padding：0; background-color：＃00ffff; height：70px>< / div>
< / body>
我不完全清楚您的问题，但您可以在页眉和页脚上设置 min-width：996px; ，使其至少与内容。
Hi all I'm trying to build a layout using CSS and I'm coming up against a strange problem. Well strange for me. I have 3 divs a Header, a Footer and a MainContent area. Header and Footer must remain at a constant width of 100% while the MainContent area must be fixed centrally at 996px; This is all fine however when I resize the browser window to a width lower than 996px and then scroll the content of the window right the 100% header and footer seem to be truncated and are no longer 100%. I've knocked up a little bare-bones script to illustrate the issue (styles inline to keep it compact). I know I can add overflow:hidden to each of the containers in order to turn off the scrollbars when to window is resized. I've also written a small piece of jQuery to force the div's back to the width, if the width drops below a certain width. However my question is around the CSS, is there a better pure CSS fix for this issue? Or can anybody explain why this happens? Thankyou in advance! DotsC
<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>
I'm not completely clear on your issue, but you can set min-width:996px; on the header and footer to keep them at least as wide as the content.
这篇关于CSS浏览器的100％宽度调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
