サイドメニューを100％保持する

Question

私は100％ページの高さに維持したいサイドメニューを持っています。

コードは今、ちょうどこの右のような基本的には次のとおりです。

body, 
html { 
    width: 100%; 
    height: 100%; 
} 

.sideMenu { 
    width: 200px; 
    height: 100%; 
    float: left; 
} 

これに伴う問題は、サイドメニューの高さは、ページの残りの部分を拡張しないということです。たとえば、フォームに追加できる入力フィールドがあり、いくつかの入力が追加されると、フォームは元のビューポートの下に広がります。メニューはありませんが。

https://jsfiddle.net/m5yfqdsu/を実証するには、「行を追加」ボタンをクリックして、ビューポートの下に入るまで入力を追加します。

メニューを100％の高さに保つ最も良い解決策は何ですか？ CSSソリューションを推奨しますが、必要に応じてJSも同様に機能します。

Answer 1

は、あなたが複数の方法でこれを解決することができ.sideMenu

// just a quick function to add more inputs 
 

 
$(document).ready(function() { 
 
    $(".add").on("click", function() { 
 
    $("fieldset").append("<div class='rowContainer'><label>Label:</label><input type='text' /></div>"); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
body, 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
fieldset { 
 
    padding: 10px; 
 
} 
 

 
.sideMenu { 
 
    width: 200px; 
 
    height: 100%; 
 
    background-color: #1c1c1c; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.wrapper { 
 
    margin-left: 200px; 
 
} 
 

 
input { 
 
    width: 100%; 
 
    max-width: 400px; 
 
    height: 40px; 
 
    display: block; 
 
    margin-bottom: 20px; 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sideMenu"></div> 
 

 
<div class="wrapper"> 
 

 
    <h1>Page Title</h1> 
 
    <form> 
 
    <fieldset> 
 

 
     <div class="rowContainer"> 
 
     <label>Label:</label> 
 
     <input type="text" /> 
 
     </div> 
 

 
     <div class="rowContainer"> 
 
     <label>Label:</label> 
 
     <input type="text" /> 
 
     </div> 
 

 
     <div class="rowContainer"> 
 
     <label>Label:</label> 
 
     <input type="text" /> 
 
     </div> 
 

 
    </fieldset> 
 
    </form> 
 

 
    <button class="add">Add row</button> 
 
</div>

Answer 2

にposition: fixed;を追加します。

1つの方法は、子要素をスクロール可能にする100％高さのコンテナを作成することです。そうすれば、実際のabsoluteルールは必要ありませんが、同じ結果が得られます。私はabsoluteを使用しないことを好みます。なぜなら、最終的に反応しやすいようにしたいからです。

このように、サイドバーとコンテンツを別々にスクロールすることができます。両者は必要以上に大きくならないでしょう。サイドバーが大きくなると、スクロール可能になります。

* { 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
html, body, .wrapper { 
 
    height:100%; 
 
} 
 

 
.wrapper { 
 
    position:relative; 
 
    overflow-y:hidden; 
 
} 
 

 
.sidebar { 
 
    width:100px; 
 
    float:left; 
 
    height:100%; 
 
    overflow-y:auto; 
 
    background-color:red; 
 
} 
 

 
.content { 
 
    width:300px; 
 
    float:left; 
 
    height:100%; 
 
    overflow-y:auto; 
 
    background-color:blue; 
 
} 
 

 
.spacer { 
 
    height:1000px; 
 
}

<div class="wrapper"> 
 
    <div class="sidebar"> 
 
    sidebar 
 
    </div> 
 

 
    <div class="content"> 
 
    content 
 
    <div class="spacer"> 
 
     spacer 
 
    </div> 
 
    </div> 
 
</div>