Блог

Главная - Вопросы по программированию - Страница расширяется, когда мне нужен только прокручиваемый элемент

Страница расширяется, когда мне нужен только прокручиваемый элемент

#html #css

#HTML #css

Вопрос:

Хорошо, я надеюсь, что все это имеет смысл.

У меня есть веб-страница, на которой я хотел бы, чтобы верхний И нижний колонтитулы отображались на экране независимо от размера окна. Между верхним и нижним колонтитулами у меня есть 2 раздела, один слева — это прокручиваемый раздел div, а другой справа — статический раздел (он не будет заполнен достаточным количеством содержимого, чтобы нуждаться в прокрутке.

Вот пример моего HTML, когда прокручиваемый div НЕ нуждается в прокрутке (развернутый на мониторе Full HD):

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>

    <header>
        <h1>header</h1>
    </header>
    
<div id="app-page">
    <div id="scrollable-section">
        <div class="app-header">
            <h1>App Header</h1>
        </div>
        <div id="scrollable-content">
            <h3>Subsection 1</h3>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <br>
        </div>
    </div>
    <div id="static-section">
        <h1>Static Header</h1>
        <p>static content</p>
    </div>
</div>


    <footer>
        <h1>footer</h1>
    </footer>

</body>

</html>

Вот пример того же HTML, но с достаточным количеством «Lorem Ipsum», чтобы прокручиваемый div нуждался в прокрутке:

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>

    <header>
        <h1>header</h1>
    </header>
    
<div id="app-page">
    <div id="scrollable-section">
        <div class="app-header">
            <h1>App Header</h1>
        </div>
        <div id="scrollable-content">
            <h3>Subsection 1</h3>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <br>
            <h3>Subsection 2</h3>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <br>
            <h3>Subsection 3</h3>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <br>
            <h3>Subsection 4</h3>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <p>lorem ipsum</p>
            <br>
        </div>
    </div>
    <div id="static-section">
        <h1>Static Header</h1>
        <p>static content</p>
    </div>
</div>


    <footer>
        <h1>footer</h1>
    </footer>

</body>

</html>

Вот CSS:

 /* Base */

html, body{
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header */

header{
    background-color: red;
    color: white;
    text-align: center;
}

header h1{
    margin: 0;
}

/* Page Content */

div#app-page{
    height: 100%;
    display: flex;
}

div#scrollable-section{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

div.app-header{
    display: flex;
    justify-content: center;
    margin: 25px;
}

div#scrollable-content{
    border: 5px solid blue;
    margin: 0 50px;
    padding: 20px;
}

div#static-section{
    border-left: 2px solid red;
    margin-right: 0;
    margin-left: auto;
    padding: 20px;
}

/* Footer */

footer{
    text-align: center;
    margin-top: auto;
    margin-bottom: 0;
    padding: 10px;
    color: white;
    background-color: red;
}

Вот моя проблема:

Полноэкранный, первый HTML-код выглядит идеально. Но при заполнении достаточным количеством содержимого, требующего прокрутки (второй HTML-код), полоса прокрутки появляется не только для прокручиваемого div, но и в крайнем правом углу для всей страницы. Это потому, что нижний колонтитул опускается чуть ниже окна, и я больше не могу просматривать одновременно нижний колонтитул и верхний колонтитул.

Кроме того, когда я изменяю размер окна в своем первом HTML, возникает та же проблема.

У меня есть CSS для настройки нижнего колонтитула так, как я это делаю, потому что на других страницах (без статического раздела, подобного этому) Я хочу, чтобы страница расширялась, чтобы я мог прокручивать всю страницу. Я думал, что способ настройки этой страницы означает, что ТОЛЬКО прокручиваемый div будет иметь полосу прокрутки, но по какой-то причине полная страница немного расширяется. Я хочу только 1 полосу прокрутки, что мне нужно изменить?

Ответ №1:

Чтобы ваш верхний и нижний колонтитулы всегда были видны, установите для них значения position: fixed; и используйте top:0; для верхнего и нижнего колонтитулов bottom:0; .

Если вы не хотите, чтобы прокручивалась вся страница, установите body {overflow: hidden;}

Тогда вам, вероятно, придется установить div overflow:scroll; независимо.

Это то, что вы ищете? Надеюсь, это поможет.

Комментарии:

1. Ах, для моих целей все, что мне нужно было сделать, это добавить «overflow: hidden;» в «div #app-page» Большое вам спасибо за вашу помощь!