Я хочу создать приложение, главной страницей которого является заголовок и 7 опций, разделенных <hr>. Также я хотел бы сделать прокрутку тела под заголовком, но я нашел некоторые проблемы с этим дизайном.
Допустим, я делаю:
h1{
padding-bottom: 20px;
text-align: left;
font-size: 25px;
border-bottom-style: solid;
border-color: black;
box-shadow: 0px 2px 5px black;
}
body{
margin:0%;
padding: 0%;}
#content{
position: absolute;
top: 70px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
}
<head>
<h1>
Some header
</h1>
</head>
<body>
<div id="content">
<span>1</span>
<hr>
<span>2</span>
<hr>
<span>3</span>
<hr>
<span>4</span>
<hr>
<span>5</span>
<hr>
<span>7</span>
<hr>
<span>8</span>
<hr>
<span>9</span>
<hr>
<span>10</span>
<hr>
<span>11</span>
<hr>
<span>12</span>
<hr>
<span>13</span>
<hr>
</div>
</body>
Теперь я создал фиксированный заголовок с недостаточной прокруткой содержимого. Но дело в том, что для того, чтобы мои варианты чувствовали себя «тронутыми», до этого я использовал следующую диспозицию:
div:active{
background-color: gray;
}
div{
padding: 20px;}
hr{
margin: 0%;
padding: 0%;}
<body>
<div>1</div>
<hr>
<div>2</div>
<hr>
<div>3</div>
<hr>
<div>4</div>
<hr>
<div>5</div>
<hr>
<div>6</div>
<hr>
<div>7</div>
<hr>
</body>
Это заставляет все это чувствовать себя как приложение. Но, к сожалению, несовместимо с фиксированным меню. Для достижения фиксированного меню я должен использовать position:absolute в содержании <div>. Если я использую это свойство с большим количеством div-ов, которые хорошо видно самим ... Все идет вместе и запутанно, я не знаю больше способов имитировать подсветку приложения или создавать фиксированный заголовок. Кто-нибудь знает, как сделать это две вещи?
Заранее спасибо.