-2

私はしばらくの間このサイトに取り組んでおり、物事をうまく機能させようとしていますが、役に立ちません. 私がやりたいのは、両端の 2 つの列を固定して、3 列のサイトを作成することです。ただし、コンテンツがその高さをオーバーフローするかどうかに基づいて、中央の 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;
        }

ブラウザのサイズを変更すると、固定されたコンテンツ、特に右側のコンテンツが消え、水平スクロールがなくなります。私はまた、相対的に配置された a に固定のものを配置しようとしましたdivが、ブラウザのサイズが変更されて中央の 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: fixedabsolute

于 2013-06-01T19:36:45.893 に答える