59

ページを垂直方向にスクロールしないWebサイトを作成しようとしていますが、DIVの1つをページの下部まで垂直方向に展開する必要があります（多くても）。コンテンツが収まらない場合は、 、divは垂直スクローラーを作成する必要があります。

私はすでにこのフィドルでdivの内側のcssを把握しており、必要に応じてスクローラーを作成しています。また、コンテナdivを成長させて、ページ内の垂直方向のスペースを正確に占めるようにする方法も理解しました。私はそれらを一緒にうまくいくようにすることはできません！

jsfiddleでは、Webサイト全体のコンテンツを表示できないことを覚えておいてください。その意味で、2番目のフィドルで得られるものは、実際に何が行われているのかを示していませんが、意図したとおりに機能します。

別の注意：これらは異なるフィドルであるため、最初のフィドルのid＃container divは、2番目の例のid＃dcontentdivです。

もう1つあります。あるタイプのコンテンツの場合、このdivは垂直方向にスクロールしますが、他のタイプのコンテンツの場合、このDIV内に要素を水平方向に表示する製品「スライダー」があるため、水平方向にスクロールします。

私が言おうとしていることを理解しやすいかもしれないので、この写真も見てください：写真

私はこれらのトピックに関する他の質問を探してみましたが、私が解決しようとしているすべての側面をカバーしているようには見えませんでした...：S

あなた/私を助けるために私が提供できる何か他のものがあれば:)それを理解するために、plsは私に知らせます！

ありがとう！

編集1：タイプミスを修正

EDIT2：説明のために写真を追加

4

10 に答える 10

19

さて、長い調査の結果、必要なことを行う回避策を見つけました: http://jsfiddle.net/CqB3d/25/

CSS:

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
    position: absolute; 
    top: 0;   
    width: 800px; 
    height: 100px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white; 
}

#framecontentBottom{
    top: auto;
    bottom: 0; 
    height: 110px; /*Height of bottom frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: navy;
    color: white;
}

#maincontent{
    position: fixed; 
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/
    margin-left:auto;
    margin-right: auto;
    bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
    overflow: auto; 
    background: #fff;
    width: 800px;
}

.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
    padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 800px; 
}

HTML:

<div id="framecontentBottom">
    <div class="innertube">
        <h3>Sample text here</h3>
    </div>
</div>
<div id="maincontent">
    <div class="innertube">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
    </div>
</div>

水平のものではまだ動作しないかもしれませんが、進行中です!

私は基本的に「インセプション」box-inside-boxes-inside-boxes モデルを削除し、動的な高さとオーバーフロー プロパティを使用して固定配置を使用しました。

これが後で質問を見つけた人に役立つことを願っています!

編集：これが最終的な答えです。

于 2012-04-15T16:55:54.000 に答える
13

要点を含むクイックアンサー

投稿された質問への回答を達成しようとする探求を早め、構文で何が起こっているのかを解読する時間を節約するために、@Joum から選択された最良の回答とほぼ同じ回答 -

答え

位置属性を固定に設定し、親要素と比較して「自動」サイズにしたい要素またはdivの好みに合わせて上部属性と下部属性を設定し、オーバーフローを非表示に設定します。

.YourClass && || #YourId{
   position:fixed;
   top:10px;
   bottom:10px;
   width:100%; //Do not forget width
   overflow-y:auto;
}

ワラ！これは、スクロールの機会を維持しながら、画面サイズや動的な着信コンテンツに応じて動的な高さを持たせたい特別な要素に必要なすべてです。

于 2016-05-09T18:54:30.417 に答える
3

フレックスボックスとプロパティだけでこれを行うことができます。overflow

親の高さも計算されます。

詳細については、この回答またはJSFiddleを参照してください。

于 2020-05-17T13:59:51.407 に答える
1

これを試してください：
CSS：

#content {
  margin: 0 auto;
  border: 1px solid red;
  width:800px;
  position:absolute;
  bottom:0px;
  top:0px;
  overflow:auto
}

HTML：

<body>
<div id="content">
...content goes here...
</div>
<body>

この場合の絶対測位が気に入らない場合は、親と子のdivをこの1つに作成して、両方を使用して遊ぶことができposition:relativeます。

編集：以下は機能するはずです（私は今のところcssをインラインにしています）：

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden">
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto">
...content goes here...
</div>
</div>
于 2012-04-15T02:52:31.970 に答える
1

これは私がこれまでにやったことができたことです。これはあなたが引き出そうとしているもののようなものだと思います。唯一のことは、コンテナ DIV に適切な高さを割り当てることがまだできないということです。

JSFIDDLE

HTML:

<div id="container">
    <div id="header">HEADER</div>
    <div id="fixeddiv-top">FIXED DIV (TOP)</div>
    <div id="content-container">
        <div id="content">CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT</div>
    </div>
    <div id="fixeddiv-bottom">FIXED DIV (BOTTOM)</div>
</div>

そしてCSS：

html {
    height:100%;
}
body {
    height:100%;
    margin:0;
    padding:0;
}
#container {
    width:600px;
    height:50%;
    text-align:center;
    display:block;
    position:relative;
}
#header {
    background:#069;
    text-align:center;
    width:100%;
    height:80px;
}
#fixeddiv-top {
    background:#AAA;
    text-align:center;
    width:100%;
    height:20px;
}
#content-container {
    height:100%;
}
#content {
    text-align:center;
    height:100%;
    background:#F00;
    margin:0 auto;
    overflow:auto;
}
#fixeddiv-bottom {
    background:#AAA;
    text-align:center;
    width:100%;
    height:20px;
}
于 2012-05-05T03:54:06.907 に答える
-1 

$(document).ready(function() {
//Fix dropdown-menu box size upto 2 items but above 2 items scroll the menu box
    $("#dropdown").click(function() {
        var maxHeight = 301;
        if ($(".dropdown-menu").height() > maxHeight) { 
            maxHeight = 302;
            $(".dropdown-menu").height(maxHeight);
            $(".dropdown-menu").css({'overflow-y':'scroll'});
        } else {
            $(".dropdown-menu").height();
            $(".dropdown-menu").css({'overflow-y':'hidden'});
        }
    });
});

于 2020-07-19T18:00:25.077 に答える
-5

とても簡単だと思います。このcssを使用するだけです

.content {
   width: 100%;
   height:(what u wanna give);
   float: left;
   position: fixed;
   overflow: auto;
   overflow-y: auto;
   overflow-x: none;
}

この後、このクラスをur divに与えるだけです-

<div class="content">your stuff goes in...</div>
于 2012-05-02T11:22:07.267 に答える