CSS中如何让div适合屏幕而不溢出
#topnavbar {
width:100%;
padding:0;
border:1px solid gray;
margin:0; }
#topnavbar p {
margin:0; }
body {
margin-left:auto;
margin-right:auto;
margin-top:0;
width:1024px; }
这是我的代码。如何让它的栏（名为 topnavbar）适合整个屏幕而不溢出？我不想做 overflow:hide; 或其他任何事情。
#topnavbar {
width:100%;
padding:0;
border:1px solid gray;
margin:0; }
#topnavbar p {
margin:0; }
body {
margin-left:auto;
margin-right:auto;
margin-top:0;
width:1024px; }
That is my code. How do I get it to have the bar(which is named topnavbar) to fit the whole screen without overflowing? And I don't want to do overflow:hide; or whatever.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你的意思是适合屏幕的整个宽度？
矛盾的是，你只需要删除
width:100%（边框被添加到这个值...）编辑：是的，Kai Qing 也是对的 - 我错过了。如果你把宽度设置为 1024，你的导航栏也会是 1024...
You mean fit the whole width of the screen?
Paradoxally, you just need to remove
width:100%(the borders are being added to this value...)EDIT: And yes, Kai Qing is right, too - I missed that. If you put width 1024 on your body, your navbar will be 1024, too...
你的CSS有点偏离：
html：
基本思想是将没有父元素的元素宽度设置为100％，然后在其下方应用居中容器。在这种情况下，#container。
您的 css 正在向正文应用宽度，因此它可能会弄乱您的整个布局。
Your css is a little off:
html:
the basic idea is to width 100% an element who does not have a parent and then apply your centering container beneath it. In this case, #container.
Your css was applying a width to the body and therefore it was likely messing up your whole layout.