【问题标题】:Restrict the resizing of div on browser resize限制浏览器调整 div 的大小
【发布时间】:2012-08-17 00:56:31
【问题描述】:

我有一个网站,其中的布局如下所示:

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 甚至不会回到原来的位置。我该如何纠正这个问题?

【问题讨论】:

  • 把html和css放到jsfiddle上

标签: html css


【解决方案1】:

container div 中添加两个元素(左、右),并给这个容器一个min-width

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

【讨论】:

  • 没有。 min-width 指定元素的最小宽度。
  • min-width,顾名思义就是指定的 html 元素应该总是至少有那么大的宽度,不管屏幕的大小是多少
  • 是的,我将 .home div 的 min-wdith 调整为 800px,但现在它以 800px 的宽度向下移动到侧边栏。问题是它仍然在下降
  • 请将其标记为答案 :D 不要只点赞,如果其他用户在谷歌上搜索这个好问题,他只会找到点赞,而不是绿色勾号 :)
  • 是的,但我不明白这如何解决问题?即使宽度增加,div 仍在下降,这就是我最初的问题
【解决方案2】:

这是带有colorized column background(如有必要)和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>

【讨论】:

  • 这个解决方案的核心是:#left div 向左浮动,#main div 不浮动,而是定位为相对或静态元素。这样在调整浏览器大小时不会错误地重新计算和替换 div,因为它很好 explained in this answer
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-04-08
  • 1970-01-01
  • 2017-08-08
  • 1970-01-01
  • 1970-01-01
  • 2011-03-29
  • 1970-01-01
相关资源
最近更新 更多