Одиночная страница без абсолютного положения

-1

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

Теперь мой CSS выглядит следующим образом:

 <style> 
     #header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;} 
     #main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;} 
    #about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;} 
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;} 
    </style> 

    <body> 
    <div id="header"> 
    content.... 
    </div> 

    <div id="main"> 
    content... 
    </div> 

    <div id="about"> 
    long content which is covered with next div, because its "top" atribute settings 
    </div> 

<div id="contact"> 
div which covers previous one's end 
</div>

Но когда некоторые контейнер должен быть больше, проблема в том, здесь ..

Спасибо за любую помощь!

источник

2016-07-24 H Sturma

Пожалуйста, быть более конкретным и сузить проблему, как минимум, как это возможно, чтобы получить реальный вид помощи – bugwheels94

@ user1533609 я сделал редактировать с некоторым кодом. Мне нужно иметь контейнеры со сменным верхним краем и высотой –

Я не понимаю. Вы знаете основы потока html? Поместите свой контейнер шириной 100% вверху с минимальной высотой 20% (от его родителя, что бы то ни было, возможно, ?) Позволили бы ему расширяться по мере добавления большего количества контента в него. Непонятно, почему вы используете абсолютное позиционирование в первую очередь. –

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

Мое предложение состоит в том, чтобы попытаться использовать абсолютные позиционируемые элементы в качестве контейнеров и иметь в них фактический шаблон.

Это поможет, если вы предоставили некоторый фактический код или конкретную проблему, с которой вы сталкиваетесь, поскольку в настоящее время она слишком расплывчата.

источник

2016-07-24 23:13:30 Joundill

Когда я устанавливаю все контейнеры, как в примере в коде, который я написал здесь, когда текст длиннее заданной высоты, он не отображается в полном размере, потому что верхний край следующего контейнера покрывает его. –

Я дам ответ на то, что, я думаю, вы можете спросить, хотя это не ясно. Надеюсь, это не слишком основательно.

Повреждение собственности вообще.

Просто у вас есть div (который по умолчанию составляет 100% ширины) в качестве заголовка в верхней части вашего html. Содержимое должно быть в другом div ниже этого.

Диваны по умолчанию имеют ширину 100%, а их высота зависит от высоты их содержимого. Они будут расти для обеспечения более высокого содержания. Эти поведения связаны с тем, что они имеют отображение свойств: block.

источник

2016-07-24 23:21:35

он работает с позиционированием! но теперь фон охватывает только пространство с содержимым, но не остальную часть высоты div, как это делает с абсолютной позицией. Как я могу это исправить? (извините за такие основные вопросы) –

Он работает с каким позиционированием? Относительный? Вы имели в виду «без позиционирования»? Ни в вашем коде, ни в вопросе не упоминается ни один фон; это единственная проблема сейчас? Если да, обновите свой вопрос, чтобы мы могли видеть, что происходит. Я устанавливал цвета фона на всех div, и ни один из них не перекрывался, когда я запускал код, который вы предоставили. –

Вы использовали%, который, если я правильно помню, относится к родительскому элементу. vh (высота видового экрана) относительно высоты экрана (100vh - полная высота экрана). Я добавил фоновый цвет, чтобы его было легче видеть.

<style> 
#header { 
    background-color: #777; 
    height: 20vh; 
} 
#main { 
    background-color: #999; 
    height: 80vh; 
} 
#about { 
    background-color: #777; 
    height: 100vh; 
} 
#contact { 
    background-color: #999; 
    height: 50vh; 
} 
</style>

источник

2016-07-25 06:01:54

Вы также можете использовать min-height вместо высоты. Это позволит расширить его при необходимости –

Одиночная страница без абсолютного положения

ответ

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