Question

我为我的网站

创建了这个布局

<div id="wrapper">
    <div id="header">
        <p>HEADER</p>
    </div>
    <div id="contentliquid">
        <div id="content">
            <p>CONTENT</p>
        </div>
    </div>
    <div id="leftcolumn">
        <p>MENU</p>
    </div>
    <div id="footer">
        <p>FOOTER</p>
    </div>
</div>

CSS

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 13px;
 color:#333
}

p {
 padding: 10px;
}

#wrapper {
 width: 100%;
 min-width: 1000px;
 max-width: 2000px;
 margin: 0 auto;
}

#header {
 float: left;
 height: 25px;
 width: 100%;
 background: #FF6633;
}

#contentliquid {
 float: left;
 width: 100%;
}

#content {
 background: #FFFFFF;
 margin-left: 200px;
}

#leftcolumn {
 float: left;
 background: #CC33FF;
 width: 200px;
 height: 100px;
 margin-left: -100%;
}

#footer {
 height: 40px;
 width: 100%;
 background: #33FF66;
 clear: both;
}

JSFiddle

我的目标是仅在流体内容（contentliquid）上设置滚动条，并使左栏高度为100％。有可能吗？我怎么能这样做？感谢

EDIT。

这是我的高尔夫球

enter image description here

Answer 1

这有一些问题。

标题不需要向左浮动一个。看起来很好。如果有的话添加一个显示块。使用浮动时，只需向左/右移动需要与另一个元素相邻的项目。

#header {
    float: left; // Remove This
    height: 25px;
    width: 100%;
    background: #FF6633;
}

由于#leftcolumn浮动到左侧，位于设计的左侧。 #contentliquid应向右浮动，因为这是左/右列的基础。我之所以这么说是因为在你的html中，＃else列是在#contentliquid之后。在编写html时，首先要看到的是你应该首先看到的东西。您按照要显示的内容的顺序编写html。

<div id="contentliquid">
    <div id="content">
    <p>CONTENT</p>
    </div>
</div>
<div id="leftcolumn">  // This element should come before #contentliquid
    <p>MENU</p>
</div>

你的#contentliquid占据了100％的宽度，这意味着占据了整个屏幕。这是错的。两个元素组合应该等于100％，因为除了屏幕外，120％不存在。这意味着#leftcolumn应为20％，而#contentliquid应为80％。（或者你认为合适的百分比。

#contentliquid {
    float: left;
    width: 100%; //bad : see below
}

<--------------------------------No Room For Anything Else----------------------->
<-----20----><------------------------------80----------------------------------->

#leftcolumn不需要左边距。在添加我提到的修复程序之后，它非常适合它。

最后。让div保持相同的高度，但滚动内容。在其上设置所需的高度，但将溢出设置为自动/滚动。要么没事。如果页面上的内容超过为其提供的空间，它将滚动。

#contentliquid {
    float: right;
    width: 80%;
    height: 200px;
    overflow: auto;
}

最后但并非最不重要的，我的（更新的）JSFiddle：http://jsfiddle.net/Az2ws/2/

Answer 2

您可以fixed元素并使用percents和overflow属性。

<!DOCTYPE html>
    <head>
    </head>
    <style>
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        }
        /* HTML5 display-role reset for older browsers */
        article, aside, details, figcaption, figure,
        footer, header, hgroup, menu, nav, section {
        display: block;
        }
        body {
        line-height: 1;
        }
        ol, ul {
        list-style: none;
        }
        blockquote, q {
        quotes: none;
        }
        blockquote:before, blockquote:after,
        q:before, q:after {
        content: '';
        content: none;
        }
        table {
        border-collapse: collapse;
        border-spacing: 0;
        }
        p {
        padding: 10px;
        }

        #wrapper {
            width: 100%;
            min-width: 1000px;
            max-width: 2000px;
            margin: 0 auto;
            overflow:hidden;
        }

        #header {
            position:fixed;
            z-index:1;
            top:0;
            height: 25px;
            width: 100%;
            background: #FF6633;
        }

        #contentliquid {
            position:absolute;
            top:25px;
            left:20%;
            width: 80%;
            z-index:0;
            padding-bottom: 40px;
        }

        #content {
            background: #FFFFFF;
            overflow:hidden;

        }

        #leftcolumn {
            background: #CC33FF;
            width: 20%;
            height: 100%;
            position: fixed;
            padding-top: 25px;
            box-sizing: border-box;
            padding-bottom: 40px;
            z-index: 0;
        }

        #footer {
            position: fixed;
            bottom: 0;
            height: 40px;
            width: 100%;
            background: #33FF66;
            clear: both;
            z-index:1;
        }
    </style>
    <body>
    <div id="wrapper">
        <div id="header">
            <p>HEADER</p>
        </div>
        <div id="contentliquid">
            <div id="content">
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
                <p>CONTENT</p>
            </div>
        </div>
        <div id="leftcolumn">
            <p>MENU</p>
        </div>
        <div id="footer">
            <p>FOOTER</p>
        </div>
    </div>
    </body>
</html>

You could see this working here

带有流体内容滚动条的布局

2 个答案: