資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理
社會研究
時尚研究
法律研究用CSS建立帶有固定側邊欄和可滾動內容區域的全高頁面
透過將高度設定為 100% 並應用適當的元素定位，可以建立具有固定側邊欄和可滾動內容區域的全高頁面。
以下示例說明了上述內容。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.main {
margin-left: 140px;
font-size: 200%;
padding: 0 3%;
}
section {
height: 400px;
background-color: tomato;
}
.sidebar {
height: 100%;
width: 140px;
top: 0;
left: 0;
position: fixed;
background-color: darkslategrey;
padding-top: 20px;
}
.sidebar a {
display: block;
padding: 2% 4%;
text-decoration: none;
color: lightblue;
font-size: 1.4em;
}
.sidebar a:hover {
color: mistyrose;
font-size: 1.8em;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6)
}
</style>
</head>
<body>
<div class="sidebar">
<a href="#">Option a</a>
<a href="#">Option b</a>
<a href="#">Option c</a>
<a href="#">Option d</a>
<a href="#">Option e</a>
</div>
<div class="main">
<h3>Example</h3>
<article><p>Vivamus non elementum felis. Sed sagittis lectus ligula, maximus interdum eros lacinia non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculusmus. Maecenas id purus neque. Donec auctor mollis vehicula. Nulla luctus mauris ut gravida
interdum. Aenean vel hendrerit massa, vel feugiat dui. </p>
<img src="https://images.unsplash.com/photo-1611670159228- eff9d9e5b3a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb1.2.1&q=80&w=200" />
<p>Phasellus ac felis consectetur lectus varius gravida ac in nunc. Suspendisse ut velit sagittis,
mattis nibh eu, semper massa. Maecenas in ligula fringilla, tristique libero sit amet, convallis ex. Sed condimentum id nulla non dignissim. Vestibulum sollicitudin eros id varius ornare.</p></article>
<section></section>
</div>
</body>
</html>輸出
這將產生以下結果 −
更新於: 2021-3-13
6K+ 瀏覽量
廣告