Css 使方框始终适合屏幕和页面内容_Css

Css 使方框始终适合屏幕和页面内容

css

Css 使方框始终适合屏幕和页面内容,css,Css,我是CSS新手，我一直在四处寻找和玩弄代码，但我只是处于一个不知道该怎么做的阶段我在页面顶部有一个简单的框。这个想法是，在任何时候，这个框都将横跨屏幕顶部，并且始终与边缘（左侧和右侧）相交。这是我到目前为止所拥有的 body { background-color:#E8E8E8; margin:0; padding:0; } #topbar { width:100%; height:50px; background-color:#fff; -webkit-box-shadow: 0px 3p

我是CSS新手，我一直在四处寻找和玩弄代码，但我只是处于一个不知道该怎么做的阶段

我在页面顶部有一个简单的框。这个想法是，在任何时候，这个框都将横跨屏幕顶部，并且始终与边缘（左侧和右侧）相交。这是我到目前为止所拥有的

body
{
background-color:#E8E8E8;
margin:0;
padding:0;
}

#topbar
{
width:100%;
height:50px;
background-color:#fff;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.10);
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.10);
}

#mainbodybox
{
margin:auto;
margin-top:150px;
width:1500px;
height:500px;
background-color:#fff;
}


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="fc_style.css">
<body>

<div id="topbar"></div>

<div id="mainbodybox"></div>

</body>
</html>

正文
{
背景色：#E8E8E8；
保证金：0；
填充：0；
}
#顶栏
{
宽度：100%；
高度：50px；
背景色：#fff；
-网络工具包盒阴影：0px 3px 0px rgba（0,0,0,0.10）；
-moz盒阴影：0px 3px 3px 0px rgba（0,0,0,0.10）；
盒影：0px 3px 3px 0px rgba（0,0,0,0.10）；
}
#主机箱
{
保证金：自动；
边缘顶部：150px；
宽度：1500px；
高度：500px；
背景色：#fff；
}
标题

现在这一切正常，除了当浏览器窗口的大小调整到小于mainbodybox的宽度时，它会使水平滚动变为可用，我想这同样是正常的，但是当你滚动它时，它会破坏顶栏，不再适合屏幕的边缘，这是如何解决的

另外，作为一个额外的问题，对于mainbodybox，同样，它应该与窗口/屏幕大小的宽度相关，但仅在一定程度上显示。例如，我希望它只有一个最小尺寸来正确匹配1024x768大小，然后是一个最大尺寸，比如1280x1024。如果小于1024x768，则会显示滚动条；如果大于1280x1024，则仅空格将继续扩展框

我为所有的文字感到抱歉，但我现在不擅长做这些事情

提前感谢您的帮助，非常感谢您为CSS添加

max width

#mainbodybox
{
margin:auto;
margin-top:150px;
width:1500px;
max-width:100%;  <-- add this
overflow-x: scroll;  <-- add this
height:500px;
background-color:#fff;
}

#主机箱
{
保证金：自动；
边缘顶部：150px；
宽度：1500px；
最大宽度：100%；您可以使用min width和max width规则来执行此操作，如果要删除滚动条max width:100%；
将意味着#mainbodbox在重新调整浏览器窗口大小时适应视口的宽度。使用带有百分比的宽度规则通常意味着元素t绑定到父容器的最大宽度在您的情况下，父容器是主体标记，但由于未指定宽度，因此默认为视口的宽度（浏览器窗口的可视区域）
至于您的第二个问题，这两个规则都可以用于各种单位，例如像素、百分比、em等。因此，您可以分别将最小宽度设置为1024px和最大宽度设置为1280px
这是一个带有最小和最大规则设置的代码笔：
你能发布一些html或代码笔演示吗？这是你想要的吗？谢谢你的回复，这确实有效。但是，当你这样做并使窗口小于mainbodybox的边缘时，它不允许你滚动查看边缘？你有没有一个例子，我不要求如果你看到图片，我已经把浏览器的屏幕弄得很薄了。但是（想象）主体框内的内容我不允许滚动到主体框的边缘来查看所有内容？这已经在将近一个小时前被提出了！？值得提出一个替代建议，或者不要麻烦原始海报没有回答问题的两个部分-他的回答进一步被编辑为包括在我发布我的答案后，关于父容器宽度的信息。我没有足够的代表对他的帖子发表评论，所以我写了一个新的答案，当时比现有答案更详细&没有忽略第二个问题。