Как создать два элемента div друг на друга?Фиксированный верхний div и нижний прокручиваемый div
Я хочу, чтобы создать веб-сайт одной страницы, где есть два div элементов друг на друга:
1- the one on top --> fixed
2- the one on bottom --> scrollable
Спасибо, я очень ценю вашу помощь.
Попробуйте этот https://jsfiddle.net/2Lzo9vfc/74/
HTML
<div class="fixed">Fixed</div>
<div class="scroll">Scroll</div>
CSS
.fixed {
position: fixed;
background: blue;
width: 100%;
height: 50px;
top: 0;
color: white;
}
.scroll {
height: 1000px;
width: 100%;
background: green;
color: white;
padding-top:50px;
}
Его очень просто !!
body {
width: 100%;
height: auto;
padding: 0;
margin: 0px auto;
font-family: Calibri, Georgia, Ubuntu-C;
font-size: 16px;
margin-bottom: 20PX
}
#header {
width: 100%;
height: 50px;
background: skyblue;
position: fixed;
}
#content {
height: 750px;
overflow: auto;
padding: 20px;
padding-bottom: 30px;
background: ORANGE;
}<div id="header">
</div>
<div id="content">
</div>Я не уверен, если это то, что вы имеете в виду с вашим вопросом, но в основном это DIV поверх другого, и один из них прокручиваются.
<!DOCTYPE html>
<html lang="pt">
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<style>
.fixedDiv{
width:250px;
height: 400px;
padding: 10px;
background-color: #FF0000;
}
.scrollDiv{
position:relative;
top:100px;
width:100%;
height:73%;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="fixedDiv">
<div class="scrollDiv">
Maecenas dignissim, nunc sit amet accumsan fermentum, neque neque sagittis lorem, id auctor massa ipsum vel ligula. Curabitur molestie nunc vel lorem feugiat faucibus. Donec sit amet auctor sapien. Cras sed metus eget ligula imperdiet eleifend id sed enim. Nulla lacinia nulla a tortor suscipit malesuada non non nulla. Nulla non iaculis tortor. Sed mi diam, interdum ut purus sed, sodales viverra ex. Mauris nisl est, tristique ut elit ac, hendrerit hendrerit nibh. Praesent ligula urna, condimentum nec maximus a, blandit sit amet velit. Ut auctor sodales justo at vehicula. Ut tristique est feugiat ligula dignissim, vel ornare massa fermentum. Donec lacinia, odio eget ullamcorper fringilla, magna quam ullamcorper augue, vel faucibus libero arcu quis arcu. Vivamus sollicitudin sem sapien, ut dignissim ex volutpat a. Donec neque enim, faucibus id facilisis nec, feugiat accumsan lorem.
</div>
</div>
</body>
</html>
CSS:
* {margin: 0 auto;}
body {
width:100%;
heighT:100%;
position: fixed;
}
#header {
width: 100%; /* Any Width you want */
height: 20%; /* Any Height you want */
position: fixed;
top:0;
left: 0;
}
#content {
width:100%; /* Any Width you want */
height:80%; /* Any Height you want */
overflow: auto;
margin-top: 20%; /* It should be the same with your #header height */
}
HTML:
<div id="header"></div>
<div id="content"></div>
Только одна точка, сумма высоты вашего DIV содержимого и заголовка DIV должен быть 100%.
Хорошее решение, но добавьте некоторое объяснение коду, так как OP, похоже, новичок. –