CSS: добавьте полосу прокрутки только в «контентную» часть страницы

Я работаю над веб-приложением, которое я хочу разместить, как показано ниже. Поскольку макет должен реагировать, высота верхнего или нижнего колонтитула неизвестна. То, что я хочу достичь, - это развернуть веб-страницу по вертикали по всей странице. Нижний колонтитул должен находиться в самом низу, а часть содержимого должна быть растянута, чтобы соответствовать разрыву между верхним и нижним колонтитулом, причем только эта часть страницы «прокручивается». Я проработал четыре часа, так как это кажется довольно простым делом, но я еще не нашел удовлетворительного ответа. Поэтому мой код очень ограничен.CSS: добавьте полосу прокрутки только в «контентную» часть страницы

<body style="overflow: hidden; height: 100%;"> 
<div id="header">Header</div> 
<div id="content" style="overflow: scroll;">Fill this space</div> 
<div id="footer">Footer</div> 
</body>

Заранее благодарен!

источник

2017-01-30 Ood

Легко для того чтобы достигнуть с помощью Flexbox. https://www.google.com/search?q=flexbox+fixed+header+footer – CBroe

Большое спасибо! Это выглядит очень многообещающе. Я был уверен, что это возможно, я просто не знал, как это называется. – Ood

Вам может быть интересно что-то вроде slimscroll. см. ссылку здесь http://rocha.la/jQuery-slimScroll. его легко настроить, а также можно работать с раскладкой flexbox. –

Вы можете использовать гибкий :)

это очень простой и простота в использовании. Единственным недостатком является поддержка старых браузеров.

<body style="overflow: hidden; height: 200px; "> 
    <div id="appContainer" style="display: flex; flex-direction: column; background: yellow; height: 100%;"> 
     <div id="header" style=" background-color: red;">Header</div> 
     <div id="content" style="flex:1; overflow-y: scroll;">Fill this space</div> 
     <div id="footer" style="background-color: red;">Footer</div> 
    </div> 
</body>

https://jsfiddle.net/mwd3oqrL/

пс. высота всего лишь для проверки в jsfiddle;)

источник

2017-01-30 11:39:49 kiwi1342

Спасибо! Flex - это то, что я искал! – Ood

Это то, как вы после?

body style="height: 100%, padding: 0px" 
div id="content" style="overflow: auto; height: 80%;"

Только протестировано на Firefox.

источник

2017-01-30 11:38:20 Greg

Благодарим вас за ответ. Значения процентов не будут работать здесь, так как мой заголовок совершенно другой высоты в зависимости от устройства, на котором он просматривается. Я думаю, что CSS3 flexbox - это способ сделать это. – Ood

Flex made easy !!

body,html{ 
 
    margin:0; 
 
    height:100vh; 
 
} 
 
.container{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    background: #fafafa; 
 
    height: 100%; 
 
} 
 

 
.header{ 
 
    background-color:#3f51b5; 
 
    padding:1%; 
 
    color:white; 
 
} 
 
.main-content{ 
 
    flex:1; 
 
    margin:2%; 
 
    padding:2%; 
 
    background-color:white; 
 
    box-shadow:0px 0px 5px black; 
 
    overflow-y: scroll 
 
} 
 
.footer{ 
 
    background-color:#3f51b5; 
 
    padding:1%; 
 
    color:white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
    <div class="header"> 
 
    <p>Header</p> 
 
    </div> 
 
    <div class="main-content"> 
 
    <p>content</p> 
 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
    <p>Hello its scrolling!!!!!</p> 
 
    </div> 
 
    <div class="footer"> 
 
    <p>footer</p> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

https://jsbin.com/filineheru/

источник

2017-01-30 12:12:42 Ranjith

CSS: добавьте полосу прокрутки только в «контентную» часть страницы

ответ

Смежные вопросы