那些遇到过的问题

如何在CSS中实现最高50%的高度？

Mis*_*hko 3 css css3 flexbox

我想在下图中的Top div占据容器高度的50%.

我怎么能实现这个目标？

操场

在此输入图像描述

html {
  height: 100%;
}

body {
  display: flex;
  height: 100%;
  margin: 30px;
}

.outerContainer {
  margin: 30px 30px 30px 0;
  width: 100px;
}

.container { 
  background-color: #ddd;
  display: flex;
  flex-direction: column;
  height: 300px;
}

.title {
  margin-bottom: 10px;
}

.result {
  margin-top: 10px;
}

.top, .bottom {
  padding: 20px;
  overflow: auto;
}

.top {
  background-color: #aaa;
  max-height: 50%;
  flex-shrink: 0;
}

.bottom {
  background-color: #bbb;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
Run Code Online (Sandbox Code Playgroud) 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="outerContainer">
    <div class="title">
      <div>#1</div>
      <div>Short Top</div>
      <div>Short Bottom</div>
    </div>
    <div class="container">
      <div class="top">
        Top Top Top
      </div>
      <div class="bottom">
        Bottom Bottom
      </div>
    </div>
    <div class="result">
      Good!
    </div>
  </div>
  <div class="outerContainer">
    <div class="title">
      <div>#2</div>
      <div>Short Top</div>
      <div>Long Bottom</div>
    </div>
    <div class="container">
      <div class="top">
        Top Top Top
      </div>
      <div class="bottom">
        Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom 
      </div>
    </div>
    <div class="result">
      Good!
    </div>
  </div>
  <div class="outerContainer">
    <div class="title">
      <div>#3</div>
      <div>Long Top</div>
      <div>Short Bottom</div>
    </div>
    <div class="container">
      <div class="top">
        Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top 
      </div>
      <div class="bottom">
        Bottom Bottom
      </div>
    </div>
    <div class="result">
      Bad!<br />Top and Bottom should occupy 50% of the height
    </div>
  </div>
  <div class="outerContainer">
    <div class="title">
      <div>#4</div>
      <div>Long Top</div>
      <div>Long Bottom</div>
    </div>
    <div class="container">
      <div class="top">
        Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top Top 
      </div>
      <div class="bottom">
        Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom 
      </div>
    </div>
    <div class="result">
      Bad!<br />Top and Bottom should occupy 50% of the height
    </div>
  </div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Bad*_*bre 7

由于框大小调整,元素上的填充超出了div的最大高度.

body *, * {
  box-sizing: border-box;
}
Run Code Online (Sandbox Code Playgroud)

通过这种方式,您可以告诉浏览器调整属性(宽度和高度)应包含的内容.

归档时间：

查看次数：

301 次

最近记录：

8 年，7 月 前
相关归档
CSS @ font-face - "src:local('☺')"是什么意思？ 130
CSS3关键帧动画:结束并停留在最后一帧 37
限制以span显示的字符 24
通缉:CSS网格系统和崩溃边距 23
通过向上滑动动画转换背景颜色 21
cursor:伪元素IE上的指针 17
如何在背景图像上设置文本剪切的动画 12
展开所选文本的背景颜色矩形 6
INPUT盒子大小的边框,在Chrome内部的TD问题中具有100%的高度和宽度 5
webkitTransitionEnd没有开火 1
难疑归档
如何将空目录添加到Git存储库？ 4039
如何从SQL Server中的SELECT更新？ 3546
如何使div 100%的浏览器窗口高度？ 2016
SQL Server中的LEFT JOIN与LEFT OUTER JOIN 1514
进程和线程有什么区别？ 1513
var关键字的目的是什么？我何时应该使用它(或省略它)？ 1508
application/x-www-form-urlencoded或multipart/form-data？ 1268
Android SDK安装找不到JDK 1185
如何在Ruby中将字符串转换为小写或大写 1081
如何旋转Android模拟器显示？ 1031