Question

我已经在这个网站上工作了一段时间，试图让事情适合我，但无济于事。我想要做的是创建一个三列站点，两个结束列是固定的。但是中心div应该根据内容是否超出其高度来滚动贝娄是HTML

<div id="main_body">
        <div id="accord_menu">
           Left Navigation Accordion
        </div>              
        <div id="col_two">
            There is no knowledge that is not power
        </div>
        <div id="col_three">
           <div id="inner">
               Here is  the right navigation
           </div>
        </div>
        <br class="clear"/>
    </div>

这是我到目前为止使用的CSS：

#accord_menu{
            height: auto;
            width: 150px;
            position:fixed;
            margin-left:3px;
            margin-top: 53px;
            padding-top: 20px;
        }

        #col_two{
            width: 600px;
            height: 1000px;
            border: 1px solid #AAA;
            background: #E6E6FA;   
            position:relative;

        }
        #col_three{
            width: 200px;
            height: auto;
            max-height: 92px;
            min-height: 91%;
            position:fixed;
            margin-left:900px
            margin-top: 53px;
            background: #E6E6FA;
        }

当我调整浏览器大小时，固定内容会消失，尤其是正确的内容，并且不会有水平滚动。我还尝试将固定的那些放在相对定位的div中，当浏览器调整大小并流过中心div (col_two)时，内容仍然开始移动。我真的很感激所有这方面的帮助。感谢。

Answer 1

我不敢回答，因为这里有太多的选票...... HERE is a working example:我希望这就是你想要的。

HTML

<aside class="global-nav-w">
   <nav class="global-nav">
       Left - 
   </nav>
</aside>

<section class="main-content cf">
    Main content
</section>

<aside class="sidebar">
   <nav class="sub-nav">
       Right
   </nav>
</aside>

CSS

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* Google box sizing - this should be default for any person writing CSS as of 2013 */

/* Google micro clear fix to clear floats without the extra <br /> */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }

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

.global-nav-w, .main-content, .sidebar {
    width: 100%;
    float: left;
} /* stack them for mobile ? */

.global-nav-w {    
    background-color: red;
}

.main-content {
    background-color: yellow;
}

.sidebar {
    background-color: lightblue;
}


@media (min-width: 50em) { /* ========= */

    .global-nav-w {
        position: fixed;
        width: 15em;
        top: 0; left: 0;
        height: 100%; /*?*/
    }

    .main-content {
        width: 100%;
        padding-left: 15em;
        padding-right: 15em;
        height: 100%; /*?*/

        min-height: 100em; /* to show scrolling */
    }

    .sidebar {
        position: fixed;
        width: 15em;
        top: 0; right: 0;
        height: 100%; /*?*/
    }

} /* ===END @MEDIA RULE ETC ============== */

Answer 2

在你的HTML中：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
    </head>
    <body>
        <aside id='left'>left</aside>
        <section id='main'>main</section>
        <aside id='right'>right</aside>
    </body>
</html>

这个css：

aside, section { padding: 2%; }
aside { width: 21%; background-color: #eee; top: 0; bottom: 0; }
section { width: 46%; background-color: #ddd; }
aside#left { position: fixed; }
aside#right { position: fixed; right: 0; }
section#main { position: absolute; left: 25%; right: 25%; }

会产生你想要的效果。

编辑：从float: left;移除了aside, section并不重要，因为它正常工作。因为position: fixed和absolute 将覆盖浮动行为。

如何制作一个带有两个固定侧列的三列页面

2 个答案: