相关疑难解决方法(0)

Internet Explorer不支持我的最小高度:使用flexbox 100%

我一直在浏览所有最小高度:StackOverflow和网络上的100%解决方案,我似乎找不到适合我(相对简单)需求的解决方案.

这就是我想要的:

我有一个两列容器,两列都应拉伸到相同的高度.
当内容未填满屏幕时,列应拉伸到整个窗口高度.
我很高兴使用flex-box,但如果可能的话,我宁愿不使用JS hacks.

示例代码:

http://codepen.io/anon/pen/dwgDq?editors=110

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="nav">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
      </div>
      <div class="content">
        <p>Content 1</p>
        <p>Content 2</p>
        <p>Content 3</p>
        <p>Content 4</p>
        <p>Content 5</p>
        <p>Content 6</p>
        <p>Content 7</p>
        <p>Content 8</p>
      </div>
    </div>
  </body>
</html>

html, body { height: 100%; margin: 0; }

.wrapper {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.container {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.nav {
  background: grey;
  width: …

Run Code Online (Sandbox Code Playgroud)

html css height html5 internet-explorer

Bre*_*aut

2014 11-07

18
推荐指数

2
解决办法

1万
查看次数

溢出:自动导致使用Flexbox切断垂直居中的项目

第一个链接是flexbox 2009模型:

http://jsfiddle.net/vLKBV/

<div style="display:-webkit-box;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

Run Code Online (Sandbox Code Playgroud)

第二个是修订后的2011 - 2012版本:

http://jsfiddle.net/MNRgT/1/

<div style="display:-webkit-flex;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;background:#0f0;-webkit-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

Run Code Online (Sandbox Code Playgroud)

如果你垂直调整结果大小,你会看到较新的flex模型中的"HELLO"消失,如果你向下滚动,它会给你一个底部空白区域.另一方面,旧的flex模型表现正常.

在最新的Chrome v26.0.1410.65中有什么方法吗？

webkit google-chrome flexbox

den*_*cio

2014 11-05

5
推荐指数

1
解决办法

3955
查看次数

Flexbox 居中在 IE 11 中不起作用

justify-content并且align-items在 IE 11 中使用 center 似乎不起作用。在其他浏览器中，它的工作原理与我预期的一样。有人知道解决方法吗？

.box {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.score-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 280px;
}

.overlay-circle {
  border-radius: 100px;
  border: 1px solid red;
  fill: transparent;
  height: 200px;
  position: absolute;
  width: 200px;
}

.center-circle {
  border-radius: 90px;
  border: 1px solid blue;
  height: 180px;
  position: absolute;
  width: 180px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="box">
  <div class="score-wrapper">
    <div class="overlay-circle"></div>
    <div class="center-circle">
      <div class="score">
        <p>800</p>
        <p>Excellent</p>
      </div>
    </div>
  </div>

Run Code Online (Sandbox Code Playgroud)

html css flexbox

cdv*_*cdv

2018 07-07

2
推荐指数

1
解决办法

4928
查看次数