Question

我从发现的样本中收集了以下内容，并设法使其运作良好。我正在使用Chrome，但我的示例在FireFox或IE中无效。

我正在尝试创建3个并排div 100％高度和30％宽度。当内容超出其高度时，div应该有一个滚动条。

因此，除了与浮动div有关的一些保证金问题外，我主要有这个。但是，它不适用于Firefox和Internet Explorer 那么是什么阻止我的布局成为跨浏览器？

次要问题。我如何在页面上平均分配div？目前我有一个spacer divs。但必须有更好的方法。

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

.content{
    display:table;
    width:100%;
    border-spacing:10px;
    border-collapse:separate;
    background:#A36;
    height:100%;
}

.Col
{
    float: left;
    border-radius:5px;
    background:#fff;
    width:31%;
    overflow: auto; 
    overflow-x:hidden;
    height:100%;
}

.spacer
{
    float: left;
    border-radius:5px;
    background:#ccc;
    width:2%;
    overflow: auto; 
    overflow-x:hidden;
    height:100%;
}
.clearfix
{
    display:block;
    clear: both;
    float:none;
}

HTML

<div class="content">
    <div class="Col">search</div>
    <div class="spacer"></div>
    <div class="Col"></div>
    <div class="spacer"></div>
    <div class="Col">
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        Testing scrolling<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
    <div class="clearfix"></div>
</div>

Answer 1

您应该只使用HTML标记来语义结构化内容，而不是使用额外的标记来进行样式/布局，这对于CSS来说就是这样。我建议如下：

HTML

<div class="col col1">
  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>  test<br>
</div>
<div class="col col2"></div>
<div class="col col3"></div>

CSS

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

body {
  overflow: auto; /* clear float */
}

.col {
  float: left;
  width: 30%;
  height: 100%;
  overflow: auto;
}

.col1 { background-color: red; }
.col2 { background-color: green; }
.col3 { background-color: blue; }

http://codepen.io/anon/pen/qAGFd

我还建议你观看精彩的CSS教程lynda.com。他们很棒！

3个并排div，高度为100％，滚动布局不是跨浏览器

1 个答案: