#html #layout #css
#HTML #макет #css
Вопрос:
Простая проблема, хотя, по-видимому, не является простым решением.
Пример здесь:http://myhideout.eu/new /
В основном сайт состоит из двух столбцов, хотя и без оболочек или чего-либо подобного, поскольку я действительно хотел бы использовать как можно меньше подобных, отчасти ради простоты, но также и для использования семантики HTML5, которая, на мой взгляд, на самом деле не включает divs, независимо от того, насколько уместно они называются.
Тем не менее, я хотел бы, чтобы боковая панель заполняла всю высоту соседнего столбца, что не так просто, как я сначала думал, что это будет. Я знаю, что это старая проблема, но я был уверен, что решил ее раньше.
В любом случае, я попытался выяснить, как это сделать без использования оболочек или JavaScript. JavaScript не подходит, но это уже другая история. Я был уверен, что будет какая-то интеллектуальная функция CSS3 или что-то подобное, что решило бы мою проблему без необходимости в оболочках, но мой поиск этой столь необходимой функции потерпел грандиозный провал.
Итак, я сказал себе: «Черт возьми! Ну что ж, тогда просто придется использовать оболочки.»
Я был уверен, что это сработает. Я пробовал разные конфигурации, но независимо от того, что я делал, я не мог заставить это работать без установки абсолютной высоты окружающей оболочки. Только представьте мое разочарование, снова сбой, когда я был уверен, что делал это раньше. Итак, я снова отправился на поиски решения, соответствующего моим потребностям. Хотя на этот раз появилось намного больше материала, это все равно был сбой. Несколько решений, которые я нашел, были, мягко говоря, сомнительными.
Итак, теперь я снова здесь, задавая еще один из тех вопросов, которые, несомненно, задавались квадриллион раз до этого. Я сожалею об этом, но я действительно не знаю, куда еще обратиться.
Я действительно надеюсь, что вы сможете помочь.
Заранее спасибо и с наилучшими пожеланиями.
Редактировать:
Это работает именно так, как я этого хочу:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
width: 800px;
}
#wrapper > article {
margin-right: 200px;
width: 600px;
background-color: blue;
}
#wrapper > aside {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<header>This is a header</header>
<div id="wrapper">
<article>
This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left
</article>
<aside>
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</aside>
</div>
<footer>This is a footer</footer>
</body>
</html>
Единственная оставшаяся проблема — избавиться от этого проклятого тега div 😉
редактировать: мне указали на свойства отображения таблицы css, и это действительно то, что я ищу, как разумное решение, но с несколькими элементами в одной строке и только одним в другой, я не могу понять, как это должно быть сделано.
Комментарии:
1. Является ли совместимость с IE6 обязательным требованием?
2. Конечно, нет. Только новейшие браузеры, которые находятся в свободном доступе, IE9, Firefox 4 и т.д.
3. Что касается моей последней правки, я только что понял, что если вы знаете высоту верхнего и нижнего колонтитулов, вы должны быть в состоянии удалить оболочку div и использовать вместо нее body.
4. Использование новых семантических элементов HTML5 вообще не исключает (и не должно) использование DIVs. Если у вас есть элемент с некоторым семантическим значением, помимо группировки, используйте один из новых элементов HTML5: раздел, статья и т.д. Когда вам нужно только сгруппировать элементы, не добавляя другого семантического значения, используйте DIV. Оболочки (и «вкладыши») не являются злом!
5. Я понимаю это, однако я, безусловно, предпочитаю обходиться без них. Не уверен, почему на самом деле. Но поскольку я могу, сказать действительно особо нечего 😉
Ответ №1:
Если совместимость с IE6 не является обязательным требованием, то я обычно делаю следующий html:
<div class="container">
<div class="content">
This is the content
</div>
<div class="sidebar">
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</div>
</div>
И это CSS:
.container { position:relative; }
.content {margin-right:<SIDEBAR WIDTH HERE>;}
.sidebar {position:absolute; top:0; bottom:0; right:0; width:???; }
Пример JSFiddle:http://jsfiddle.net/geC3w /
Это работает во всех современных браузерах и Internet Explorer 7 и выше, это также чрезвычайно просто, если совместимость с IE6 не является обязательным требованием
Комментарии:
1. Единственные требования — это действительно новейшие браузеры. Firefox 4, IE9 и тому подобное. Я не уверен точно, как должно работать ваше предложение, но я обязательно проверю его как можно скорее. Спасибо
2. @Zacariaz — По сути, он создает боковую панель как элемент с абсолютным расположением и растягивает ее до размера родительского div, заставляя оба значения top и bottom равняться нулю. Если вам нужно поиграть с этим, ознакомьтесь со ссылкой JSFiddle в моем ответе и поработайте с HTML и CSS, сколько душе угодно.
3. Что ж, это, безусловно, работает, и если я достаточно умен, я, возможно, даже смогу избежать divs. Не могу сказать, что мне очень нравится абсолютное позиционирование, но, полагаю, я могу сделать исключение. Спасибо за ответ.
4. Только одна ошибка: содержимое должно быть выше боковой панели — jsfiddle.net/geC3w/1 — хотя это редко имеет значение.
5. важной частью является позиция: абсолютная; сверху: 0; снизу: 0;
Ответ №2:
Если совместимость с IE7 не является обязательным требованием, используйте display: table-cell; :
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
}
#wrapper > * {
display: table-cell;
}
#wrapper > article {
width: 600px;
background-color: blue;
}
#wrapper > aside {
width: 200px;
background-color: green;
}
Комментарии:
1. Это звучит очень интересно. Кто-нибудь хочет уточнить это? Если на самом деле меня не волнует IE7 и ниже, чего я не делаю, это разумный подход?
2. @Zacariaz Вы пытаетесь эмулировать табличные функции — элементы в одной строке, имеющие одинаковую высоту, — поэтому имеет смысл использовать функции компоновки таблиц CSS. Основным препятствием для их использования для всего является отсутствие поддержки в IE7 и более ранних версиях, что делает их непрактичными на многих сайтах.
3. mkay. Это немного проще, чем абсолютное позиционирование, и поскольку вы можете получить IE8 для XP, меня действительно не волнует старый IE. Я также немного изменил подход. Пожалуйста, проверьте это и дайте мне знать, если есть что-то, о чем я должен беспокоиться: jsfiddle.net/qFKA2/5 По сути, я удалил оболочку и сопоставимость браузера. Также позиция: относительная, не показалась необходимой.
4. @Zacariaz Я ввел совместимость с браузером, потому что моим браузером по умолчанию на этом компьютере является Firefox 3.6, и он по умолчанию не оформляет элементы HTML5, вам также понадобится это плюс html5shim для поддержки IE8. Относительная позиция осталась от вашего исходного кода, я ее не менял.
5. Спасибо за информацию. Однако есть небольшая проблема. Мне придется исследовать этот метод дальше, чтобы действительно понять его, но поскольку я использую его сейчас, он на самом деле не работает, поскольку я должен использовать несколько элементов article, и они должны отображаться друг на друге. Насколько я понимаю, на данный момент для того, чтобы заставить его работать, потребуется оболочка article .