Простая проблема, хотя, видимо, не простое решение.
Пример здесь: http://myhideout.eu/new/
По сути, сайт состоит из двух столбцов, хотя без оберток или чего-либо подобного, как мне бы хотелось, чтобы было как можно меньше подобного, отчасти ради простоты, но и для использования семантика HTML5, которая, на мой взгляд, на самом деле не включает в себя div, независимо от того, как они правильно названы.
Однако я бы хотел, чтобы боковая панель заполняла всю высоту смежного столбца, что не так просто, как я думал вначале. Я знаю, что это старая проблема, но я был уверен, что решил ее раньше.
Во всяком случае, я попытался выяснить, как это сделать, не используя обертки или 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, и это действительно то, что я ищу, как интеллектуальное решение, но с несколькими элементами в одной строке и только одним в другой, я не могу понять как это должно быть сделано.