Question

以上是我想要完成的截图。我尝试设置height:100%，但由于margin-top:48px导致“溢出”，导致我向下滚动，即使内容适合1个屏幕。现在，内容仅限于彩色部分（为了清晰起见，我将其编辑出来）。

它的CSS是：

#main_area {
    float: left;
    width: 600px;
    margin-top: 48px;
    padding: 0px 20px;
}

.sidebar { /* this one here */
    float: left;
    left: 10px;
    width: 278px;
    padding-top: 48px;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #FFFFFF
}

Answer 1

我发现下面的css有问题，你能先解决这个问题。

你给了左边10px，但没有提到绝对，你想要这个绝对吗?? ??

从截图中，我没有得到你想要的东西，你能解释得多吗

  .sidebar { /* this one here */
        float: left;
        left: 10px;
        width: 278px;
        padding-top: 48px;
        padding-right: 20px;
        padding-left: 20px;
        background-color: #FFFFFF
    }

在窗口调整大小事件中执行以下代码

var docHeight = Math.max(
            $(document).height(),
            $(window).height(),
            /* For opera: */
            document.documentElement.clientHeight
        );
        var docWidth = Math.max(
            $(document).width(),
            $(window).width(),
            /* For opera: */
            document.documentElement.clientWidth
        );
        $("#yourdiv").css({
            "height":docHeight,
            "width":docWidth
        });                   
    }

Answer 2

唉，浮动的DIV对你想要实现的目标来说不是一个好的解决方案 - 这是你将不得不恢复使用多列TABLE或者使用Javascript获得时髦的情况之一。 / p>

记住 - 当您浮动DIV时，它基本上从页面流布局中移除并浮动在页面的内容上。将高度设置为100％不会将列的高度设置为浮动页面的高度 - 它会将浮动DIV的高度设置为浮动DIV内容的组合高度。

O'Reilly的“Head First HTML”中有很好的描述。

老实说，如果你想创建真正可控的多列页面设计，TABLE可能是你最好的选择。

Answer 3

晚了好，从来没有。认为这可能会有所帮助：

htmls

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

csss

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

您可以查看此@ https://github.com/gutierrezalex/two-column-layout

用颜色填充剩余区域？

3 个答案: