web-dev-qa-db-ja.com

必要に応じてオーバーフローとスクロールを伴う自動高さdiv

私はページの垂直スクロールのないウェブサイトを作成しようとしていますが、DIVの1つがページの下部に垂直に拡張する必要があります（最大）、そしてそれが収まらないコンテンツがある場合、divは垂直スクローラーを作成する必要があります。

私はすでに this fiddle で計算されたdivのinsideのcssを持ち、必要に応じてスクローラーを作成します。また、 作成方法 コンテナーdivがページ内の垂直方向のスペースを正確に占有するように成長することもわかっています。私は彼らを一緒に働かせることはできません！

jsfiddleではウェブサイト全体のコンテンツを表示することはできず、その意味で2番目のフィドルで得たものは実際に何が行われているのかを示していませんが、意図したとおりに動作します。

ちょうど別の注意：それらは異なるフィドルなので、最初のフィドルのid＃container divは2番目の例のid＃dcontent divです。

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

私が言っていることを理解する方が簡単かもしれないので、この写真も見てください： [〜＃〜] picture [〜＃〜]

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

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

ありがとう！

EDIT1：タイプミスを修正

EDIT2：説明用の画像を追加

htmlcssscrolloverflow
37
Joum

まあ、長い研究の後、私は必要なことを行う回避策を見つけました： 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>
</div>

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

基本的に、「開始」ボックス、内部ボックス、内部ボックスモデルを削除し、動的な高さとオーバーフロープロパティを使用した固定配置を使用しました。

これが後で質問を見つけた人の助けになることを願っています！

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

16
Joum

誰もcalc()に言及していないことに驚いています。

私はあなたのフィドルからあなたの特定のケースを作ることができませんでしたが、あなたの問題を理解しています：あなたはまだ_height: 100%_を使用できる_overflow-y: auto_コンテナが必要です。

overflowは、オーバーフローの処理をいつ開始する必要があるかを知るために、ハードコードされたサイズ制約を必要とするため、これはそのままでは機能しません。したがって、_height: 100px_を使用した場合、期待どおりに機能します。

良いニュースは calc()が役立つ ですが、_height: 100%_ほど単純ではありません。

calc()を使用すると、任意の測定単位を組み合わせることができます。

したがって、写真に記載する状況については、以下を含めます。 picture of desired state

ピンクのdivの上下の要素はすべて既知の高さであるため（合計の高さは_200px_とします）、calcを使用してole pinkyの高さを決定できます。

height: calc(100vh - 200px);

または、「高さはビューの高さの100％から200pxを引いた値です。」

その後、_overflow-y: auto_はチャームのように機能するはずです。

18
Brandon

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

@Joumの最適な回答とほぼ同じ回答。投稿された質問への回答を達成しようとするクエストを迅速化し、構文で起こっていることを解読する時間を節約します。

回答

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

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

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

10
MattOlivos

これを試して：
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を作成して、両方とも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>
1
preahkumpii

これが私がこれまでにできたことです。これはあなたが引き出しようとしているものの一種だと思います。唯一のことは、コンテナ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;
}
1
Rodrigo D'Agostino

これは、FlexBox=を使用し、厄介なabsoluteポジショニングを使用しない水平ソリューションです。

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: row;
}

#left,
#right {
  flex-grow: 1;
}

#left {
  background-color: lightgrey;
  flex-basis: 33%;
  flex-shrink: 0;
}

#right {
  background-color: aliceblue;
  display: flex;
  flex-direction: row;
  flex-basis: 66%;
  overflow: scroll;   /* other browsers */
  overflow: overlay;  /* Chrome */
}

.item {
  width: 150px;
  background-color: darkseagreen;
  flex-shrink: 0;
  margin-left: 10px;
}
<html>

<body>
  <section id="left"></section>
  <section id="right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </section>
</body>

</html>
1
TranslucentCloud