divをページの上から下に伸ばす方法は？

多くの解決策があるスレッドが多数あることはわかっていますが、いずれも私のために働いていません。私は初心者で、HTMLでウェブサイトを作っています。私は前にウェブサイトを作ろうとしましたが、同じ問題がありました。以前のものを削除して新しいものを作ったが、まだ解決できない。divをページの上から下に伸ばす方法は？

私が試したし、実際に動作しません何

：100％/ 100VHへ

設定の高さ（法1）100％までのmin-heightのdivを設定
を、それは絶対位置を与えますこのやって：
```
top: 0px 

bottom: 0px 
```

（法2）

私は、ページをスクロールすることができます私のdivは、ページの下部に伸びていないメソッド1を行うと、代わりにブラウザウィンドウの100％の高さに引き伸ばされています。

私が方法2を行うとき、divsはちょうど消えます。私は国境を伸ばすことを余儀なくされていないので、あなたはまだそれを見ることができますが、もし私がこれをしたら、それは消えるでしょう。

そして、私はちょうど初心者で、JavaScript、jQueryなどの基礎も知らないので、純粋なHTMLとCSSを使用して、JavaScriptやその他のものは使用しないでくださいそれらを学ぶ。

EDIT：テキストが追加されたときにDIVを伸ばす必要がありますが、実際はこれが私の主な問題の1つです。

出典

2016-10-04 SaJmoN

試してみてください...あなたが望むようにスタイルで猿を使うことができます。私は.Mainの内側にあなたの境界線を入れて、height: 100%

ノートにhtml, bodyを変更：ポジショニングが原因メインのマージンのための絶対位置をご利用のファンキーな見えます。私はそれを変えるだろう。しかし、あなたのページにコードをコピーすれば、それはあなたが目指しているものかもしれません。

html, body { 
 
    height: 100%; 
 
} 
 

 
.page { 
 
    background: linear-gradient(#2d5aa4, #03637c); 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    position: relative; 
 
} 
 

 
.NavigationBar { 
 
    background: linear-gradient(to right, #636363, #4e4e4e); 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    width: 220px; 
 
    min-height: 100%; 
 
    z-index: 2; 
 
    font-family: BloggerSans; 
 
    font-size: 1.5em; 
 
} 
 
.NavigationBarBorder { 
 
    background: linear-gradient(to right, #292929, #171617); 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 10px; 
 
    min-height: 100%; 
 
    z-index: 3; 
 
} 
 

 
.MainParent { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
.NavigationTop { 
 
    background: linear-gradient(#636363, #4e4e4e); 
 
    position: absolute; 
 
    left: 220px; 
 
    width: calc(100vw - 220px); 
 
    height: 75px; 
 
    z-index: 1; 
 
    font-family: Jaapokki; 
 
    font-size: 2em; 
 
} 
 

 
.Main { 
 
    background: linear-gradient(#ffffff, #e8e8e8); 
 
    position: absolute; 
 
    top: 20vh; 
 
    bottom: 0px; 
 
    width: calc(100vw - 440px); /* set your width */ 
 
    left: 220px; 
 
    margin-left: 90px; /*set your margin here */ 
 
    min-height: 100%; 
 
    z-index: 4; 
 
    padding-left: 40px; 
 
} 
 

 
.MainBorder { 
 
    background: linear-gradient(#f79104, #e9720d); 
 
    position: absolute; 
 
    top: -10px; 
 
    left: 0; 
 
    width: 40px; 
 
    min-height: 100%; 
 
} 
 

 
h1 { 
 
    font-family: 'Jaapokki'; 
 
    text-align: center; 
 
    font-size: 3em; 
 
} 
 

 
.Text { 
 
    font-family: 'BloggerSans'; 
 
    font-size: 2em; 
 
}

<body class="page"> 
 
    <div class="MainParent"> 
 
     <nav class="NavigationBar"> 
 
      <div class="NavigationBarBorder"></div> 
 
      Table of content 
 
     </nav> 
 
     <header class="NavigationTop"> 
 
      Navigation 
 
     </header> 
 
     <div class="Main"> 
 
      <h1>Title</h1> 
 
      <div class="Text"> 
 
       Text </br> 
 
      </div> 
 
      <div class="MainBorder"></div> 
 
     </div> 
 
    </div> 
 
</body>

出典

2016-10-04 18:02:50 mhatch

それはちょうどそのよう、少しアウト固執する必要があるため、私の境界線は.Mainの内部であってはならない。 http://i.imgur.com/YniYk5L.png お返事ありがとうございます。すごく奇妙な答えをして申し訳ありませんが、私は入力が実際には "回答"または "保存"を意味しないと思っていました。 – SaJmoN

@SaJmoN負のトップ 'top：-10px'を使用する – mhatch

メインに幅を与え、次に左から配置することもお勧めします。現在の方法では、ブラウザが絞り込まれるとメインが消えます。 – mhatch

divをページの上から下に伸ばす方法は？

答えて

関連する問題