Question

我有两个div，我已经定位在屏幕的左侧和右侧（使用浮动和/或绝对定位，我找到了很多方法来定位它们）。在中间我有一个div，使我的网站内容保持中心。我的问题是，当我的浏览器宽度很小时，那些外部div被迫进入并将所有内容弄乱。当我的浏览器宽度很小时，我想要一个滚动条显示，以便用户向左或向右滚动以查看中心内容之外的div。我正在使用溢出：滚动主体元素，但这没有做任何事情。我还需要使用

这是基本结构

<body>
  <div id="navLeft">
  <div id="navRight">
  <centered content/all of webpage>
</body>

这是body和side divs的CSS

body { 
background: #A2F0FA url('images/bg_site.jpg');
background-repeat: repeat-x; 
font: 13px Arial, Sans-Serif; 
color: #525252;
overflow:scroll;

}

#navLeft {
border: 5px solid #fff;
width:220px;
height: 260px;
float:left;
position:absolute;
top:10%;
left:28%;
opacity:0.85;

}

#navRight {
border: 5px solid #fff;
width:220px;
height: 260px;
float:right;
position:absolute;
top:10%;
left:85%;
opacity:0.85;

}

Answer 1

你可以在身体方面尝试一些负余量。

但你不能在小屏幕上显示左边的内容，所以如果内容很重要，你就放松它了：

body {margin:0 -220px ; /* width of aside element */。

Test the idea here

最好是在加载时通过javaScript检查并调整窗口和窗口的宽度。身体和如果存在水平滚动及其scrollright值。

然后将scrollright重置为适当的值，而不会让访问者烦恼。

溢出元素流出

1 个答案: