Question

我今天早些时候提出了一个问题并得到了我接受的答案，但它似乎有效，除了列内容变得大于浏览器窗口时出现的问题，因为我无法向下滚动。

有没有办法在不使用绝对值的情况下得到上一个问题中我接受的答案中给出的相同结果？

这是我需要帮助解决的问题

链接到显示问题的jFiddler jsfiddle.net/HKJvP /

Answer 1

这是你应该看的css ....显示：应该内联....这是两个列...对3列做同样的事情....而另一件事不设定高度。它应该随着内容自动增加....它也有助于动态页面......

                .wrapper{overflow:hidden; width:90%; padding:30px; margin:0 0 0 5%; }
               .wrapper .right {width: 80%;
                             padding-right: 20px;
                               float: right;
                              display: inline;
                          border: solid #000 1px 2px 2px 1px;
                        padding:10px;
                              }


            .wrapper .leftbar {
                 width: 15%;
                float: left;
           display: inline; padding:10px;
                 }

Answer 2

看看这个

HTML

<div class="left-fixed">
    Left side here!
</div>
<div class="floating-container">
    <div class="left">
        Center Fluid<br/>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
    <div class="right">
        Right '200px width'<br/>

        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    </div>
</div>

CSS

body, html{
    height: 100%;
    overflow-y: auto;
    margin: 0;
}

.left-fixed {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 230px;
    background-color: green;
}

.floating-container {
    background-color: red;
    height: 100%;
    margin-left: 230px;
}

.floating-container .left {
    float: left;
    width: 50%;
    background-color: yellow;
    min-height: 100%;
}

.floating-container .right {
    float: right;
    width: 50%;
    background-color: blue;
    min-height: 100%;
}

演示：Fiddle

如何在列布局中删除绝对div并保持相同的布局？

2 个答案: