При выполнении столбцов равной высоты в CSS, есть ли способ заставить внутренние якорные ссылки по-прежнему функционировать правильно?

Question

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

http://www.ejeliot.com/blog/61

Проблема в том, что при нажатии на внутреннюю ссылку привязки содержимое смещается вверх, и из-за переполнения верхняя часть страницы исчезает.

Например, нажмите на эту ссылку

http://www.noosanativeplants.com.au/~new/articles/botany-words/

Затем нажмите букву, чтобы перейти к этому разделу. Вы заметите, что я описываю.

Есть ли способ с этим бороться, или это недолгое появление техники? Вы рекомендуете использовать технику фонового изображения для искусственных столбцов одинаковой высоты? Я бы предпочел не использовать это, поскольку одна страница имеет другой фон, и потребуется немного переделать, чтобы сделать фон для этой страницы.

Спасибо

Answer 1

Я действительно рекомендую вам использовать метод отказоустойчивых столбцов. Если вы не являетесь экспертом по макету (без обид, серьезно), держитесь подальше от магии отступов / полей / переполнения и единственной верной техники макета. Последнее элегантно, но может вызвать нежелательные побочные эффекты, если вы будете выполнять тяжелые манипуляции с JS / DOM и все (см. Список проблем ).

Как сказал slink у вас есть два переполнения: скрытые правила в вашем css:

#main-container {
  overflow:hidden;
}

И

#content {
  overflow:hidden;
}

Если вы отключите / удалите их, вы сможете снова использовать полосы прокрутки. К сожалению, "взлом" отступа / отрицательного поля будет виден. Я рекомендую вам полностью удалить это решение и использовать поддельные столбцы. Фон искусственных столбцов может быть добавлен к вашему # main-content или даже к #content div (не так, как в примере статья ALA , в которой фоновое изображение присваивается тегу body).

Удачи!

Обновление: Извините, позвольте мне исправить себя: для использования искусственных столбцов в вашем случае лучше установить текущий фон для элемента html, а фон для искусственного - body.

Answer 2

Проблема вызвана двумя overflow: hidden; правилами, определенными для элементов #content и #main-contaniner.

Answer 3

Предполагая, что ваши столбцы равной высоты являются левым меню и правым содержимым в этом примере, вы можете просто использовать свойство 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>