Question

我是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>

现在这个工作正常，除了，当浏览器的窗口大小调整到小于mainbodybox的宽度时，它会导致水平滚动变得可用，我想这很好但是当你滚动它时会打破topbar而不再适合屏幕边缘，如何解决？

另外作为一个额外的问题，对于mainbodybox类似地，它应该与窗口/屏幕尺寸的宽度相关地显示，但仅在一定程度上显示。例如，我希望它只有一个最小尺寸，以正确适合1024x768尺寸，然后最大的一个像1280x1024。如果小于1024x768则会出现滚动，如果大于1280x1024，则只需空格就可以继续扩展框。

我很抱歉所有的文字，但我现在做这些事情并不好

在此先感谢您的帮助，我们非常感谢

Answer 1

您可以使用 min-width 和 max-width 规则执行此操作，如果您要删除滚动条max-width: 100%;则意味着 #mainbodybox 会适应视口的宽度。使用百分比宽度规则通常意味着元素绑定到父容器的最大宽度，父容器是body标签，但由于没有指定宽度，它将默认为视口的宽度（可视区域）浏览器窗口）。

至于你的第二个问题，这两条规则都可以用于各种单位，例如：像素，百分比，em等。所以你可以分别将 min-width设置为1024px ， max-width设置为1280px 。

这是一个带有min＆amp; amp;的编码器。最大规则设置：codepen example

Answer 2

将max-width添加到您的CSS

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

您可以添加overflow声明，该声明将为您提供滚动功能。更彻底的方法是确保您的子元素不超过父元素的宽度，在这种情况下#mainbodybox

使盒子不断适合屏幕和页面内容

2 个答案: