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

sanekdnb · 16.05.24

Привет, ребята,

Я не занимаюсь HTML, CSS уже пять лет, и мои знания сошли на нет. Так что потерпите мои глупые вопросы.

У меня есть базовая страница здесь:

Код:

#wrapper { width: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: green; 
}
#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/

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

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

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

 <!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 · 06.06.24

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%; 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>

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

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

sanekdnb

vl.konovalov

Поделиться страницей

О нашем форуме!

Новые пользователи

Что нового?