При создании столбцов одинаковой высоты в CSS есть ли способ заставить внутренние привязки работать правильно?

StackOverflow https://stackoverflow.com/questions/823596

  •  05-07-2019
  •  | 
  •  

Вопрос

Я использовал последний пример на этой странице для столбцов одинаковой высоты.

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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top