2

私はhtmlの初心者なので、これは簡単で愚かな質問かもしれません;-)

少し楽しいプロジェクトでは、ウィンドウの高さ全体を占めるがスクロールしない html ページが必要です。(たとえば、静的な配置を使用せずにフッターを常に表示したい)。

表示できる以上のコンテンツがある場合は、ネストされた div をスクロールする必要があります。サイトには 2 つの列があるため、可能なスクロールバーは 2 つです。

問題をよりよく説明するために、小さな例を作成しました。

HTML:

<body>
    <div id="sitepage">
        <div id="header" class="box">testtitle</div>
        <div id="dynamiccontent">
            <div id="leftside" class="box">
                <div id="navheader">little navigation</div>
                <div id="scrolleftcolumn" class="scrollcontainer">
                    <div id="forumandthreadlist">
                        <div class="forumslist selectable hoverable innerbox">textasfasdfds</div>
                    </div>
                </div>
            </div>
            <div id="rightside">
                <div class="box" id="navcontent">navigation hereasdfa sdfasd fsad sad fasd fasd fasdf asdf sd</div>
                <div
                id="scrollrightcolumn" class="scrollcontainer">
                    <div id="content">
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                    </div>
                    <div id="editor" class="box">post reply + editor + preview</div>
            </div>
        </div>
    </div>
    </div>
</body>

CSS:

html, body, * {
    padding: 0;
    margin: 0;
}
html {
    width: 100%;
    height: 100%;
}
#header {
}
#dynamiccontent {
}
#leftside {
    position: absolute;
    left: 0;
    right: 75%;
}
#rightside {
    position: absolute;
    left: 25%;
    right: 0;
}
div.box, .innerbox {
    margin: 5px;
}
div.box {
    background-color: #1c3c41;
}
div.innerbox {
    background: #274850;
    color: #C9C9C9;
}

JsFiddlelink 基本的に: "scrollcontainer" クラスで垂直スクロールを有効にするにはどうすればよいですか? リキッドレイアウトでも可能ですか？

注: 「overflow:auto;」については知っています。スクロールを有効にするために、液体レイアウトでネストされた div の高さを制限することはできないようです。

4

2 に答える 2

1

overflow:scroll;scrollcontainer クラスに追加するかoverflow:auto、コンテンツがあふれたときにのみスクロールする場合。

高さをパーセンテージで設定し、幅を制限して水平スクロールを防ぎます。

私は提案します：

header{
    height:10%;
}
dynamiccontent{
    height:85%;
}
footer{
    height: 5%;
}

次に、左右の列の高さを 100% (動的コンテンツの 100%) に設定します。

于 2013-01-29T12:30:08.147 に答える
0

使用可能な高さを行うために拡張する必要がある子まで、親を塗りつぶす必要があります。

  1. #sitepage は、使用可能なすべての高さを占める必要があります
  2. #dynamiccontent は、上部から垂直方向に {size of header} ピクセル離して配置する必要があります
  3. 左右の領域は、使用可能な高さをすべて使用する必要があります。

スタイル:

html, body, * {
    padding: 0;
    margin: 0;
}
html {
    width: 100%;
    height: 100%;
}
#sitepage {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
#header {
}
#dynamiccontent {
    top: 30px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
#leftside {
    position: absolute;
    left: 0;
    top:0;
    right: 75%;
    bottom: 0;
}
#rightside {
    position: absolute;
    left: 25%;
    right: 0;
    bottom: 0;
    overflow: auto;
    top:0;
}
div.box, .innerbox {
    margin: 5px;
}
div.box {
    background-color: #1c3c41;
}
div.innerbox {
    background: #274850;
    color: #C9C9C9;
}
于 2013-01-29T12:54:24.897 に答える