Как сделать эти элементы div всегда липкими

sanekdnb

Привет, ребята, Я не занимаюсь HTML, CSS уже пять лет, и мои знания сошли на нет.

Так что потерпите мои глупые вопросы. У меня есть базовая страница здесь:

 


#wrapper {


width: 100%;


min-height: 100%;


display: flex;


flex-direction: column;


justify-content: center;


background-color: green; /* just for testing */


}


#nav {


flex: 1;


flex-grow: 1;


flex-shrink: 1;


flex-basis: auto;


flex: 1 1 auto;


}


#container {


flex: 2;


flex-grow: 1;


flex-shrink: 1;


flex-basis: auto;


flex: 1 1 auto;


}


#footer {


}

Код (разметка): Я хочу, чтобы основной навигационный блок всегда находился сверху, нижний колонтитул всегда находился внизу, а контейнерный блок находился после основного навигационного элемента, который сжимался и расширялся в зависимости от содержимого, но не попадал в нижнюю часть.

дел. Я хочу что-то вроде этого: https://css-tricks.com/boxes-fill-height-dont-squish/

но мне нужно всего три ряда блоков, и каждый блок уникален.

Вот что я сделал, и результат отвратительный:

  <!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1"> <link rel="stylesheet" href="/xxxx/html/css/style.css" media="screen,projection,tv"> <meta property="og:locale" content="ru_US"/> <meta property="og:type" content="Веб-сайт"/> <title>XXXX</title> </head><body> <div id="wrapper"> <div id="nav"> <h1><a href="/"><em>XXXX</em></a></h1> </div> <div id="container"> This is an example document.






</div> <div id="footer"> <a href="/xxxx/html/signup.html">Sign up</a> || <a href="/xxxx/html/signin.html">Sign in</a> </div> </div> <!-- WRAPPER ENDED --> </body></html>

Код (разметка): Надеюсь, я ясно выразился. Спасибо,

vl.konovalov

1) вы ничего (пока) не делаете, чтобы гарантировать перенос DIV.

2) Несмотря на то, что они в некоторой степени бессмысленны, вы могли бы также использовать верхний/основной/нижний колонтитул HTML 5, чтобы избежать ненужного использования классов повсюду.

3) если вы не установили 100% высоту для тела и HTML, обертке не на чем основывать высоту.

4) Маловероятно, что вы будете подчеркивать содержание H1. Это избыточная семантика.

 

flex-grow: 1;

flex-shrink: 1;

flex-basis: auto;

Код (разметка): С помощью этого CSS:

 flex:1 1 auto;

Код (разметка): Вот ручка:
https://codepen.io/jason-knight/pen/jOGjWPo

Одна глупость, которую ты сделал, это много повторяться. Этот:

 flex: 2;

Код (разметка): Это полная тарабарщина.

Это двоичное значение true/false как 0/1. Этот:

  html, body { height:100%; /* in production you'd likely have a reset in use */ margin:0; padding:0; } body { display:flex; flex-direction:column; } body > * { flex:1 0 auto; padding:1rem; } body > *:not(main) { flex-grow:0; background:#5F5; }

Код (разметка): Это то же самое, что и следующее:

  <body> <header> <h1><a href="/">XXXX</a></h1> </header> <main> <h2>Main Content Here</h2> <p> This is an example document.



</p> </main> <footer> <a href="#xxxx/html/signup.html">Sign up</a> || <a href="#xxxx/html/signin.html">Sign in</a> </footer> </body>

Код (разметка): В таком порядке.

CISHost

Неважно, я нашел это: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers

Похожие темы	Дата
Требования к печати изображений	19.10.2024, 18:10
ВИзитки для Юридической компании	19.10.2024, 18:10
Flash-баннеры	19.10.2024, 18:10
3D в дизайне	19.10.2024, 18:10
Отслеживание покупок через PayPal – Лотерейные билеты – Сбор средств	19.10.2024, 18:10
Ведение блога — это легко или нет?	19.10.2024, 18:10
Циклическое переключение изображений разного размера при прокрутке	19.10.2024, 18:10
Избегайте этих 65 медленно загружающихся плагинов WordPress	19.10.2024, 18:10
Как сделать изображение адаптивным?	19.10.2024, 18:10
Как включить смешивание и сопоставление «3 по цене 1» для нескольких категорий продуктов в Woocommerce?	19.10.2024, 18:10

Как сделать эти элементы div всегда липкими

sanekdnb

vl.konovalov

CISHost

I AM

Интересно