Поведение нижнего колонтитула Css при изменении размера окна

-1

Я сделал липкий нижний колонтитул, используя несколько трюков, которые я узнал here, но я хочу ограничить минимальное изменение размера окна до 700 пикселей.Поведение нижнего колонтитула Css при изменении размера окна

Когда я изменяю размер окна, когда окно достигает менее 700 пикселей, рядом с нижним колонтитулом остается пустое пространство, другими словами оно не подходит для всего экрана.

Я не уверен, что это неправильно here..here мой jsBin пример:

`https://output.jsbin.com/gawidovijo`

Спасибо заранее.

источник

2017-01-28 Slashy

на 'body', добавить' position: relative; 'и изменить' margin: 0 0 100px; 'to padding: 0 0 100px;' –

@MichaelCoker интересный! можете ли вы добавить небольшое объяснение, почему ваше предложение работает? как он отличается от моего? – Slashy

На body, добавьте position: relative; и изменить margin: 0 0 100px; к padding: 0 0 100px;

футер абсолютно позиционирован, и она нуждается в относительный родителе быть расположены по отношению к. Без него он будет позиционировать себя относительно элемента html, который является таким же широким, как и область просмотра. Каждый раз, когда вы полностью позиционируете элемент, убедитесь, что вы позиционируете родителя так, чтобы вы позиционировали абсолютно позиционируемый элемент. Поскольку вы определяете max-width вашей страницы на body, имеет смысл разместить нижний колонтитул относительно body.

И с этим изменением, ваша сноска теперь будет позиционироваться по отношению к body, и это означает, что нижнее поле на body ниже появится колонтитул, так, чтобы получить колонтитул для отображения в этом 100px пространства, вам необходимо изменить это пространство от margin до padding, чтобы нижний колонтитул расположился там.

источник

2017-01-28 18:37:43

Slashy,

Я не вижу белое пространства вы ссылаетесь. Я просмотрел в FF, Chrome и IE11 на Windows 7. Возможно, вам просто нужно очистить кеш браузера?

Несколько других элементов, чтобы быть в курсе:

положения: абсолютный; относится к родительскому контейнеру. Вы может захотеть использовать положение: исправлено; который использует окно браузера как родителя.
Возможно, вы также захотите использовать нижнее дно на корпусе , а не на краю.
Последнее, что вы можете включить, это размер окна: border-box; По умолчанию размер окна установлен в . Если вы установите ширину на 100%, а затем добавьте отступы, то будет более 100% с содержимым.

При использовании абсолютно позиционирующих элементов вам необходимо определить положение родителя, если вы хотите использовать положение родителя в отношении абсолютно позиционированного ребенка. Вот пример, когда я хочу div в верхнем правом углу моего контента. Вот это HTML, начиная с тела:

<body> 
    <div class="parent"> 
    <div class="child">This element is in the top right</div> 
    <p>Here is the parent content</p> 
    </div> 
</body>

Вот CSS:

.parent{ 
    position: relative; 
} 
.child{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
}

Если я не определил позицию: относительная; в .parent, то.ребенок будет располагаться на основе тела.

Абсолютно позиционирующие вещи могут быть немного сложными вначале. Я надеюсь, это поможет вам.

источник

2017-01-28 18:42:12 Pagri

Похоже, Майкл избил меня до ответа. единственная новая информация, которую предоставляет мой пост, - позиция: фиксированная; и размер коробки: border-box; Удачи! – Pagri

Поведение нижнего колонтитула Css при изменении размера окна

ответ

Смежные вопросы