限制在浏览器缩放时div的大小调整

Question

限制在浏览器缩放时div的大小调整

3

我有一个网站，其布局看起来像以下这样：

enter image description here

main内容的css如下：

.home {margin:178px 0 0 100px;width:800px;padding:0 10px 0px 10px;float:left;height:auto!important;height:310px;min-height:310px;}

问题是每当我调整浏览器大小时，主要内容div不会保持原位，而会自动下移并出现水平滚动条。

如果我将浏览器大小调整回原始大小，主要div甚至也不会回到原来的位置。如何解决这个问题？

- user1240679

将HTML和CSS放在JSFiddle上。 - robasta

2个回答

0

这是一个双列全屏布局，其中包含着色的列背景（如果需要）和jsfiddle：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body {
  margin:0;
  padding:0;
  height:100%;
  background-color:#ccc;
}

#header {
  background-color:#ccf;
}

#container {
  position:relative;
  min-height:80%;
  border:4px solid red;
  overflow:hidden;
}

#left {
  float:left;
  width:200px;
  background-color:#cfc;
  padding-bottom:9999px;
  margin-bottom:-9999px;
}

#main {
  position:relative;
  margin-left:200px;
  background-color:#ffc;
  padding-bottom:9999px;
  margin-bottom:-9999px;
}

#footer {
  background-color:#fcc;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="container">
  <div id="left">LEFT</div>
  <div id="main">MAIN</div>
  <div style="clear:both"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>

- Stano

这个解决方案的核心是：#left div 左浮动，而 #main div 不浮动，但作为相对或静态元素定位。这样，在调整浏览器大小时，divs 就不会被错误地重新计算和移位，正如这个答案中所解释的那样。 - Stano

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patt Mehta · Accepted Answer

在一个名为“container div”的容器中添加两个元素（left和right），并给这个容器设置最小宽度。

<head>
  <style type="text/css">
    body {
      min-width:750px;
      min-height:500px;
    }
    div.container {
      min-width:600px;
      min-height:450px;
    }
    div.left, div.right {
      min-height:400px;
    }
  </style>
</head>
<body>
  <div class="header"></div>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>
</body>