-2

我已经在这个网站上工作了一段时间，试图让事情对我有用，但无济于事。我想要做的是制作一个三栏网站，两个末端栏是固定的。但是中心 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相对位置的 a 中，当浏览器调整大小并流过中心 div 时，内容仍然开始移动(col_two)。我真的很感激这方面的所有帮助。谢谢。

4

2 回答 2

1

我不敢回答，因为这里有很多反对票......这里有一个工作示例：我希望这就是你想要的。

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 ============== */
于 2013-06-01T20:50:22.467 回答
-1

在您的 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: fixedandabsolute 将覆盖浮动行为。

于 2013-06-01T19:36:45.893 回答