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

我是新来的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的宽度，它会导致水平滚动变得可用，这再一次我想是好的，但是当你滚动它打破了不再适合屏幕边缘，这怎么解决？

同样作为一个额外的问题，至于mainbodybox类似的，它应该显示在窗口/屏幕大小的宽度，但只在一定程度上。例如，我希望它只有一个最小尺寸才能正确适合1024x768大小，然后是1280x1024之类的最大尺寸。如果小于1024x768，那么滚动会出现，如果大于1280x1024，那么只需简单的空间就可以继续扩展盒子。

我为所有的文本抱歉，但我只是不擅长的时刻提前为任何帮助做这些事情

谢谢，它极大的赞赏

来源

2014-04-08 Max

你可以张贴一些你的HTML或codepen演示？ –

http://codepen.io/anon/pen/Fvahu/这是做你想做的吗？ – jessegavin

添加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

来源

2014-04-08 17:23:41 Vector

谢谢你的回应，这确实有效。但是，当你这样做，并使窗口比mainbodybox的边缘更小，它不会让你滚动查看边缘？ – Max

你是否有例子，我不追问你的意思 – Vector

[link]（http://tinypic.com/view.php?pic=2je5y61&s=8#.U0Q37vldV8E）如果你看到图片，我让浏览器屏幕非常薄。然而（想象）该主体框内的内容，我不允许滚动到该主体框的边缘来查看所有内容？ – Max

可以使用最小宽度和最大宽度规则，如果要做到这一点，你想删除滚动条max-width: 100%;将意味着#mainbodybox适应窗口的宽度，因为浏览器窗口重新调整大小。使用带百分比的宽度规则通常意味着元素被绑定到父容器的最大宽度，在父容器是body标签的情况下，但由于没有指定宽度，它将默认为视口宽度（可视区域的浏览器窗口）。

至于你的第二个问题，这两个规则可以与各种单位一起使用，例如，像素，百分比，时间等。因此，您可以分别设置最小宽度至1024px和最大宽度至1280px。

这里有一个与最小&最大的规则设置codepen：codepen example

来源

2014-04-08 18:11:10 fracture

这已在近一小时前提出！这是值得提出一个替代建议或不打扰 – StevenPHP

原始海报并没有回答这个问题的两个部分 - 进一步他的答案被编辑，包括有关父容器宽度的信息后，我张贴我的答案。我没有足够的代表评论他的帖子，所以我写了一个新的答案，当时的答案比可用的答案更详细，并且没有忽视第二个问题。 – fracture

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

回答

相关问题