При создании столбцов одинаковой высоты в CSS есть ли способ заставить внутренние привязки работать правильно?
Вопрос
Я использовал последний пример на этой странице для столбцов одинаковой высоты.
http://www.ejeliot.com/blog/61
Проблема в том, что когда вы нажимаете внутреннюю ссылку привязки, содержимое смещается вверх, и из-за переполнения верхняя часть страницы исчезает.
Например, нажмите эту ссылку
http://www.noosanativeplants.com.au/~new/articles/botany-words/
Затем щелкните букву, чтобы перейти к этому разделу.Вы заметите то, что я описываю.
Есть ли способ борьбы с этим, или это недостаток техники?Рекомендуете ли вы мне использовать технику фонового изображения для столбцов искусственной одинаковой высоты?Я бы предпочел не использовать это, так как одна страница имеет другой фон, и для создания фона для этой страницы потребуется небольшая доработка.
Спасибо
Решение
Я действительно рекомендую вам использовать надежный метод искусственных столбцов.Если вы не эксперт по верстке (без обид, серьезно), держитесь подальше от магии заполнения/полей/переполнения и единственно верной техники верстки.Последний вариант элегантен, но может вызвать нежелательные побочные эффекты, если вам придется выполнять тяжелые манипуляции с JS/DOM и все такое (см. список проблем).
Как Слинк сказал у вас есть два переполнения:скрытые правила в вашем CSS:
#main-container {
overflow:hidden;
}
И
#content {
overflow:hidden;
}
Если вы отключите/удалите их, вы сможете снова использовать полосы прокрутки.К сожалению, «взлом» отступа/отрицательного поля будет виден.Я рекомендую вам полностью удалить это решение и использовать искусственные столбцы.Фон искусственных столбцов можно добавить в ваш #main-content или даже в div #content (не так, как в примере в статья АЛА который устанавливает фоновое изображение в тег body).
Удачи!
Обновлять: Извините, позволю себе поправиться:чтобы использовать искусственные столбцы в вашем случае, лучше установить текущий фон на html
элемент и искусственный фон для body
элемент.
Другие советы
Предполагая, что в этом примере столбцы одинаковой высоты представляют собой левое меню и правое содержимое, вы можете просто использовать свойство Margin-Left в правом столбце и установить цвет фона контейнера на желаемый цвет левого столбца.Это предполагает, что ваш правый контент всегда имеет большую высоту, чем левый, но есть и другие способы обойти эту проблему.
#container {
width: 960px;
background-color: #000;
}
#menu {
float:left;
width: 240px;
}
#content {
float:right:
margin-left: 240px;
background-color: #fff;
}
<div id="container">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
</ul>
</div>
<div id="content">
stuff goes here
</div>
</div>
Проблема вызвана двумя overflow: hidden;
правила, определенные для элементов #content
и #main-contaniner
.