More than 5 years have passed since last update.

サイドバーの高さをコンテンツ部分の100%にしたいとき

CSS
サイドバー
高さ

Posted at 2016-07-22

index.html

<body>
	<div class="pageContainer">
	    @include('front.common._header')
	    
		<div class="l-sideMenu">
		    <ul class="menu">
		    	<li>メニュー</li>
		    	<li>メニュー</li>
		    	<li>メニュー</li>
		    </ul>
		</div>	  
	  
	    @yield('mainContents')    
	    @include('front.common._footer')
	</div>
</body>

common.css

html, body {
  height: 100%;
}

/*ヘッダーからフッターまでを囲んだ要素*/
.pageContainer {
  position: relative;
  min-height: 100%;
}

.l-sideMenu {
  z-index: 1000;
  position: absolute;
  width: 250px;
  height: 100%;

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up