代码之家 › 专栏 › 技术社区 › anton980

垂直调整3个div中的1个以适应窗口?

responsive resize css html

anton980 · 技术社区 · 7 年前

我正在尝试创建一个简单的响应页面,该页面由以下几个div组成:

<div id="container"> maximum 1200 width and 1000 height
    <div id="vertically-static-top">20 pixes high</div>
    <div id="vertically-resizeable-middle">adjustable height</div>
    <div id="vertically-static-bottom">50 pixels high</div>
</div>

总最大宽度和最大高度分别为1200和1000

垂直静态div只能在浏览器窗口调整大小时水平调整大小,但垂直方向上,它们需要始终固定高度

可垂直调整大小的div需要根据窗口尺寸调整其宽度和高度。

对于我的生活,我不知道如何让中间的div垂直调整大小,并保持浏览器窗口内的一切!

非常感谢你!

2 回复 | 直到 7 年前

Bhuwan 7 年前

我想你必须利用这个位置 absolute . 检查下面的代码段。

html,
body {
  font: 13px Verdana;
  margin: 0;
  height: 100%;
}

#container {
  max-height: 1000px;
  max-width: 1200px;
  background: red;
  color: #fff;
  height: 100%;
  position: relative;
}

#vertically-static-top,
#vertically-static-bottom,
#vertically-resizeable-middle {
  position: absolute;
  left: 0;
  right: 0;
}

#vertically-static-top {
  height: 20px;
  top: 0;
  background: black;
}

#vertically-static-bottom {
  height: 50px;
  bottom: 0;
  background: black;
}

#vertically-resizeable-middle {
  top: 20px;
  bottom: 50px;
}

<div id="container">
  <div id="vertically-static-top">20 pixes high</div>
  <div id="vertically-resizeable-middle">adjustable height</div>
  <div id="vertically-static-bottom">50 pixels high</div>
</div>

我希望这能奏效。

Sergey Sklyar 7 年前

这可以通过flexbox实现。以下是示例代码:

#container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical!important;
  -webkit-box-direction: normal!important;
  -ms-flex-direction: column!important;
  flex-direction: column!important;
  height: 240px;
  margin: auto;
  max-height: 1000px;
  max-width: 1200px;
}

#vertically-static-top,
#vertically-static-bottom {
  background-color: #80bdff;
  border-radius: .25rem;
  color: #fff;
  padding: 1rem;
}

#vertically-resizeable-middle {
  background-color: #957bbe;
  border-radius: .25rem;
  color: #fff;
  flex-grow: 1;
  padding: 1rem;
}

<div id="container"> maximum 1200 width and 1000 height
    <div id="vertically-static-top">20 pixes high</div>
    <div id="vertically-resizeable-middle">adjustable height</div>
    <div id="vertically-static-bottom">50 pixels high</div>
</div>

调整#容器的高度( height: 240px; )或者100%放置以适应父元素的高度

推荐文章

zxcvbnm · 为什么字符串::resize和字符串::substr O(1)

3 年前

Heinz · 无法调整非模式html对话框设置style='resize:both'的大小,但可用于模式对话框

3 年前

Alex Cai · 未最大化后的AWT面板布局问题

3 年前

GoGoAllen · 如何针对所有类型的浏览器大小修复我的网页布局?

7 年前

Alberto Soto · 媒体查询加载时动态激活/禁用脚本并调整窗口大小

7 年前

Jojo Narte · 如何将UIView调整为特定的高度和宽度,包括其子视图?

7 年前

Tarzan · Python调整图像大小

7 年前

Eddy · 调整窗体大小时调整标签字体大小

7 年前

Nemo XXX · 如何在QTableView中按比例调整列宽?

7 年前

Brian Hamill · Numpy调整图像大小/重缩放图像

7 年前