#css
#css
Вопрос:
Я пытаюсь создать макет с 4 разделениями; верхний, нижний колонтитулы и левый и правый столбцы.
Заголовок должен быть вверху, заполнять всю ширину и иметь высоту 50 пикселей. Нижний колонтитул должен быть прикреплен к нижней части окна, также высотой 50 пикселей. Левый и правый разделы должны располагаться рядом друг с другом и заполнять все пространство (по вертикали) между нижней частью заголовка и верхней частью нижнего колонтитула.
Кажется, что это должно быть чрезвычайно просто, но я потратил на это последние 5 часов и не могу заставить это работать правильно.
Лучшее, что я мог сделать, это:
<body>
<div class="BodyWrapper">
<div id="Header"></div><!-- End Header -->
<div class="Left LeftColumn">asds</div>
<div class="Right RightColumn"></div>
<div class="push"></div>
</div><!-- End Body -->
<div id="Footer"></div><!-- End Footer -->
CSS:
*{
padding:0px;
margin:0px;
}
html, body {
height:100%;
font-family:verdana;
font-size:11px;
color:#646464;
}
.BodyWrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
overflow:hidden;
}
#Footer, .push {
height: 4em;
}
.Left {
float:left;
}
.Right {
float:right;
}
.LeftColumn {
width:20%;
height:100%;
margin-bottom:-52px;
border:1px solid gray;
background:red;
}
.RightColumn {
width:70%;
height:100%;
margin-bottom:-52px;
border:1px solid gray;
background:green;
}
#Header {
height:49px;
background:blue;
border-bottom:1px solid black;
}
#Footer {
height:49px;
background:blue;
border-top:1px solid black;
}
Результат этого — почти то, что я хочу, но левый и правый столбцы доходят до самого низа страницы и закрывают нижний колонтитул. Чего я действительно хочу, так это придать им высоту 100% минус 50 пикселей. Есть предложения? Или пример этого, который работает?
Комментарии:
1. Эта статья должна помочь: 456bereastreet.com/archive/201012/… И этот тоже: cssplay.co.uk/layouts/flexible-3column.html
2. Я бы рекомендовал проверить matthewjamestaylor.com/blog /…
3. Это хороший ресурс, но я не видел ни одного с фиксированным нижним колонтитулом.
4. на самом деле есть matthewjamestaylor.com/blog /…
Ответ №1:
Я знаю, я знаю — таблицы — это зло. Но здесь они прекрасно работают! Все проблемы с высотой и шириной решаются с помощью реализации самой таблицы.
<table>
<tr id="header">
<td>Header Stuff</td>
</tr>
<tr id="cols">
<td style="width:20%" id="leftcol">Left col Stuff</td>
<td style="width:80%" id="rightcol">Right Col Stuff</td>
</tr>
<tr id="footer">
<td>Copyright Whatever footer stuff</td>
</tr>
</table>
Комментарии:
1. Пока это выглядит как лучший вариант. Какой бы «неправильной» ни была таблица, кажется, что это «просто работает». Я подожду еще немного, чтобы посмотреть, есть ли у кого-нибудь чистое решение для div / css, но если нет, я собираюсь принять этот ответ и пойти с ним!
2. @Nick спасибо. Я большой поклонник таблиц для верстки, и меня ужасно раздражает, когда люди критикуют это. Рад, что вы это цените.
3. @ Downvoter не хочешь объяснить? Я не против потерять репутацию, но мне хотелось бы знать, почему, чтобы я мог улучшить.
4. Пока это дает мне то, что я ищу, с очень небольшим усилием. Разметка немного больше, но не слишком. Но самое главное, это работает! Итак, я могу продолжить создание своего приложения. 🙂
Ответ №2:
Если вы позволите jquery помочь вам в этом процессе, он будет значительно упрощен. Пример: http://jsfiddle.net/robx/G8aWv/5
Комментарии:
1. Jquery? Я не вижу никакого JavaScript в вашем примере?
2. было несколько. Извините, позвольте мне это исправить. возможно, забыл нажать обновить, прежде чем размещать ссылку здесь.
3. Я все еще не вижу Java Script, но, похоже, он в основном работает без него… Единственная проблема заключается в действительно длинном тексте, подобном упомянутому на другом плакате. ie. jsfiddle.net/d9RrT/9 Если текст слишком длинный, его следует скрыть, или столбец следует прокручивать.
4. извините, честно говоря, я не знаю, почему обновление не сохраняется. Смотрите обновленное. Я удалил этот старый jsfiddle и добавил новый. На этот раз я несколько раз закрывал и открывал сайт, чтобы проверить себя. Так что, надеюсь, это больше не повторится.
5. Это интересное решение, но вам пришлось бы вызывать функцию изменения размера каждый раз, когда изменяется размер окна. И он все еще делает некоторые странные вещи, когда содержимое становится слишком длинным.
Ответ №3:
Взгляните на свойство clear для вашего div нижнего колонтитула. Например:
#Нижний колонтитул { очистить: оба; высота: 49 пикселей; фон: синий; верхняя граница: сплошной черный 1 пиксель; }
Комментарии:
1. ясно: оба будут сдвигать нижний колонтитул вниз, но я бы хотел, чтобы нижний колонтитул был «прикреплен» к нижней части окна, а столбцы заполняли все пространство между ними.