The OpenNET Project / Index page

[ новости /+++ | форум | wiki | теги | ]



"Как сделать HTML страницу из трёх блоков с прокруткой среднего "
Вариант для распечатки  
Пред. тема | След. тема 
Форум WEB технологии (CSS)
Изначальное сообщение [ Отслеживать ]

"Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +4 +/
Сообщение от КриоМух (?), 25-Окт-23, 09:22 
Доброго дня Уважаемые!

Клепаю тут страницу, и хочу чтобы не было JS, а надо в частности мне сделать стандартную штуку:
<body>
   <div id="pgHeader">Тут шапка страницы. Её высота неизвестна</div>
   <div id="pgContent">Тут собственно блок с содержимым. Он должен быть высотой от шапки до подножья, и если содержимое не влазит, то с прокруткой (но только сам блок с прокруткой, а не страница)</div>
   <div id="pgFooter">Это подножье страницы, тоже неясна высота. Этот блок должен быть прикреплен к низу экрана.</div>
</body>

Подскажите как это на CSS сделать? Т.е. шапка и подножье всегда должны быть на своих местах соответственно сверху и снизу, а блок содержимого при необходимости скроллиться.

Ответить | Правка | Cообщить модератору

Оглавление

Сообщения [Сортировка по времени | RSS]


1. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +4 +/
Сообщение от abi (?), 26-Окт-23, 15:46 
Я бы фреймами сделал.
Ответить | Правка | Наверх | Cообщить модератору

4. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +3 +/
Сообщение от КриоМух (?), 26-Окт-23, 19:33 
> Я бы фреймами сделал.

Ну фреймы вроде как неактуально настолько, что их даже из браузеров то ли подумывают выпиливать, то ли выпилили. Не, фреймы это шибко жоский хардкор.

Ответить | Правка | Наверх | Cообщить модератору

2. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +2 +/
Сообщение от Аноним (2), 26-Окт-23, 18:40 
надо делать таблицами. Вот шаблон:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<TABLE>
<!-- Тут будет верстка -->
</TABLE>
</BODY>
</HTML>

Ответить | Правка | Наверх | Cообщить модератору

3. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +2 +/
Сообщение от КриоМух (?), 26-Окт-23, 19:06 
>[оверквотинг удален]
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
> <HTML>
> <HEAD>
> </HEAD>
> <BODY BGCOLOR="#FFFFFF">
> <TABLE>
> <!-- Тут будет верстка -->
> </TABLE>
> </BODY>
> </HTML>

Спасибо, но можно чуточку более развёрнуто, как сделать чтобы ячейка в среднем из 3-х рядов в таблице не растягивалась под своё содержимое?
т.е. какой набор трюков нужен над таблицей
<table>
<tr><td>шапка</td></tr>
<tr><td>содержимое + <img style="height:2000px" src="путь_к_большой картинке"><td></tr>
<tr><td>подножье</td></tr>
</table>
, чтобы таблица растянулась на экран, шапка верхняя часть, подножье снизу, а содержимое с огромной картинкой в ячейке у которой скролл по вертикали, которым это содержимое и мотается?

Ответить | Правка | Наверх | Cообщить модератору

5. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +2 +/
Сообщение от Аноним (5), 27-Окт-23, 19:28 
так третий ответ в гугле на "scroll inside div" - https://www.geeksforgeeks.org/making-a-div-vertically-scroll.../
ну вы ч0

            div.scroll {
                margin:4px, 4px;
                padding:4px;
                background-color: green;
                width: 500px;
                height: 110px;
                overflow-x: hidden;
                overflow-y: auto;
                text-align:justify;
            }

Ответить | Правка | Наверх | Cообщить модератору

6. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +3 +/
Сообщение от КриоМух (?), 28-Окт-23, 20:49 
>[оверквотинг удален]
>            
>     height: 110px;
>            
>     overflow-x: hidden;
>            
>     overflow-y: auto;
>            
>     text-align:justify;
>            
> }

Слушайте, но ведь ясно видно, что данное решение не подходит. В нём подразумевается, что высота div'а известна, она и задаётся в стиле. А я же написал задачу. Что сколько-то вертикали уходит на заголовок, сколько-то на подножье, остальное (неизвестно сколько, зависит от браузера, разрешения у пользователя, от шрифтов и пр.) должно остаться на контент. И в этом соль и есть как отвести ему только оставшееся место на экране. Условия же вопроса вполне однозначно описаны, можно ведь прочитать прежде чем отвечать, и уж тем более прежде чем ворчать не по делу.

Ответить | Правка | Наверх | Cообщить модератору

7. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +3 +/
Сообщение от Аноним (7), 15-Ноя-23, 10:33 
Высота таблицы 100%,
высота заголовка 100px,
высота середины не указана,
высота футера 100px.
Ответить | Правка | Наверх | Cообщить модератору

8. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +2 +/
Сообщение от КриоМух (?), 15-Ноя-23, 17:13 
> Высота таблицы 100%,
> высота заголовка 100px,
> высота середины не указана,
> высота футера 100px.

Вы таки настаиваете что футер и заголовок должны быть жестко заданной высоты. Но этого нет в условии. Понимаете, вот к примеру в шапке блок H1 с текстом - типа лого, также контакты всякие написаны. В футере тоже что-то текстом оформлено, откуда там знать какую задавать высоту? Ведь это будет зависеть от разрешения, шрифтов и прочих пользовательских условий.

Как на форумах любят давать свои условия задач, вместо ответов на вопросы сформулированные вопрошающим. Ужас.


Ответить | Правка | Наверх | Cообщить модератору

9. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +1 +/
Сообщение от Аноним (9), 10-Фев-24, 01:53 
> Доброго дня Уважаемые!

Решили задачку?
Как вариант можно было основной каркас обернуть в див со свойством
display: flex;
Flex-flow: column;
Justify-content: space-between;

Кажись так
А центральному блоку поставить overflow-y: scroll;
Но ему скорее всего еще желательно задать св-во height: ...%

Ну как-то так


Ответить | Правка | Наверх | Cообщить модератору

11. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +/
Сообщение от КриоМух (ok), 13-Фев-24, 19:46 
> Кажись так

Спасибо огромное, Уважаемый!

Именно так получилось. Всё оказалось до неприличия просто


<html>
    <head><title>test</title></head>
    <style>
    body {
        margin: 0;
        padding: 0;
    }
    #d1 {
        display: flex;
        flex-flow: column;
        background-color: yellow;
        height: 100vh;
        width: 50vw;
        margin: 0 auto;
    }
    #d2_1 {
        background-color: white;
    }
    #d2_2 {
        background-color: blue;
        height: 99%;
        overflow-y: scroll;
    }
    #d2_3 {
        background-color: red;
    }
    </style>
    <body>
        <div id="d1"><!-- Общий блок -->
            <div id="d2_1">ШАПКА ТУТ</div><!-- Шапка -->
            <div id="d2_2">Содержимое тут</div><!-- Содержимое -->
            <div id="d2_3">Подножье тут</div><!-- Подножье -->
        </div>
    </body>
</html>

Ответить | Правка | Наверх | Cообщить модератору

10. "Как сделать HTML страницу из трёх блоков с прокруткой среднего "  +/
Сообщение от Аноним (-), 10-Фев-24, 10:02 
На stallman.org те самые три блока посмотри.
Ответить | Правка | Наверх | Cообщить модератору

Архив | Удалить

Рекомендовать для помещения в FAQ | Индекс форумов | Темы | Пред. тема | След. тема




Партнёры:
PostgresPro
Inferno Solutions
Hosting by Hoster.ru
Хостинг:

Закладки на сайте
Проследить за страницей
Created 1996-2024 by Maxim Chirkov
Добавить, Поддержать, Вебмастеру