0

我有一个页面需要使用窗口进行拉伸和调整大小，我已经设法做到了，但是#pgContent如果窗口被调整到更高的尺寸但它不会缩小，我需要“内部 div”（）拉伸超过，例如 800 x 600 像素。因为我现在拥有它，它伸展得很好，但它也比我想要的收缩得更多！

它在宽度上按我想要的方式工作，但在高度上却没有！？

这是一个视觉示例：

例子

我的 CSS：

* {
  margin: 0;
  padding: 0;
  outline: 0;
}

/*| PAGE LAYOUT |*/

html, body {
  height: 100%;
  width: 100%;
  /*text-align: center;*/ /*IE doesn't ~like this*/
  cursor: default;
}

#pgWrapper {
  z-index: 1;
  min-height: 100%;
  height: auto !important;
  /*min-height: 600px;*/ /* THIS SHOULD WORK BUT IT DOESN'T */
  height: 100%;
  min-width: 1000px;
  width: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;
  background: #000;
}

#pgContent {
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 50px;
  overflow: hidden;
  background: #CCC;
}

#footWrapper {
  z-index: 2;
  height: 50px;
  min-width: 940px;
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0px;
  background: #C00;
}

/*| END PAGE LAYOUT |*/

和 HTML：

<body>

<div id="pgWrapper">
  <div id="pgContent">
    This DIV should stretch with window but never lower than for example 800px x 600px!<br />
    If window size is lower then scrollbars should appear.
  </div>
</div>

<div id="footWrapper">
  <div id="footLft"></div>
  <div id="footRgt"></div>
</div>

</body>

如果有人可以在这方面给我帮助，我将不胜感激。

提前致谢。

4

3 回答 3

1

第二个最小高度将覆盖第一个。

使用 100% 的高度和 680px 的最小高度；

#pgWrapper {
z-index: 1;
min-height: 600px;
height: 680px;
min-width: 800px;
width: 100%;
}
于 2013-06-27T22:44:19.720 回答
0

您是否尝试过在#pgWrapper 中使用以下内容

  overflow: auto;

演示：http: //jsfiddle.net/joncairns/LA8hg/

于 2013-06-27T22:45:36.977 回答
0

我相信 height auto 会影响你的伸展，评论它会让你的风格表现得更好。当然这可能取决于不同的浏览器

#pgWrapper {
    z-index: 1;
    min-height: 100%;
    /*height: auto !important;*/
    min-height: 680px;
    /* THIS SHOULD WORK BUT IT DOESN'T */
    height: 100%;
    min-width: 1000px;
    width: 100%;
    position: absolute;
    overflow: hidden;
    text-align: center;
    background: #000;
}

工作样本：http: //jsfiddle.net/QqMeC/4/

于 2013-06-27T22:38:32.067 回答