HTML простирается больше размера экрана

Я закончил структуру HTML для новой планировки нашего сайта для клуба подводного плавания. Дизайнер сделал план, и я собрал его в html.HTML простирается больше размера экрана

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

В скроллбарах скрыты, но вы можете проверить его здесь: http://test.profunda.be/newlayoutr2.html и скрипку https://jsfiddle.net/u9buvpL0/3/

Я думаю, что это имеет какое-то отношение:

.div-main-right-content { 
    width: 100%; 
    height: 100%; 
    float: right; 
    position: absolute; 
    word-break: normal; 
    background-color: white; 
    left: 220px; 

}

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

источник

2016-05-05 user2660616

попробуйте добавить в начало вашего html – IamFaysal

Первое, .div-main-right-content float: left; не будет работать, потому что вы полностью позиционируете элемент. Второй; потому что вы полностью позиционируете этот элемент, он будет иметь 100% -ный размер его контейнера. Не стоит создавать сайт на основе таблиц. На большинстве ваших сайтов должен быть один фон, подходящий и масштабируемый. Только .div-main-left-menu может быть разделено bg и должно быть намного проще установить его абсолютично (только этот элемент! :)). Также на вашем сайте мы можем видеть пустое пространство внизу. Это потому, что главное значение .div-main-left-menu среди других. Плавающий элемент намного проще построить :). –

Во-первых, нет смысла использовать поплавок: справа вместе с положением: абсолютное.

Затем вы дали 100% вашему правильному содержимому div, и он занимает 100% от его ширины контейнера. И, конечно, выходит наружу, потому что левая колонка уже заняла часть ширины.
Вы можете использовать это, чтобы правая колонка занимала всю свободную ширину:
Добавить дополнительный div main-right-inner.
Используйте этот CSS:

.div-main-right 
{ 

    margin-left: 330px; 
} 

.main-right-inner { 
    float: right; 
    width: 100%; 
}

Кроме того, в Div-основной-правой-контента удалить
float: right; position: absolute;

Отредактировано скрипку: https://jsfiddle.net/u9buvpL0/6/

Дополнительный обертка .main-правой внутренней, чтобы избежать возможные проблемы с очисткой плавающих элементов внутри правого столбца.

источник

2016-05-05 07:49:30 Julia

Я работал на сайте и обновлялся. https://jsfiddle.net/u9buvpL0/7/ Для проверки в прямом эфире: http://test.profunda.be/newlayoutr3.html. Теперь мне просто нужно, чтобы высота была исправлена. – user2660616

Этот ответ используется для ширины. Для высоты я использовал javascript, так как я хочу, чтобы высота div заполнила экран даже при изменении размера. ' <тело OnResize = "туРипсЫоп()" OnLoad = "туРипсЫоп()"> 'Я знаю, что это не лучший способ, но это не будет решена. – user2660616

Вы можете использовать css 'calc':' .cont {height: calc (100vh - 134px);} '. В настоящее время он широко поддерживается: http://caniuse.com/#feat=calc. И если вы заботитесь об устаревших браузерах, вы можете использовать modernizr для проверки поддержки браузера и использовать вышеуказанную функцию jquery в качестве резервного. – Julia

я видел код, используемый

.div-main{width:59%}

выровнять собственно

источник

2016-05-05 07:33:08

user this code 
.div-main-right-content 
{ 
    width: 60%; 
    height: 100%; 
    float: right; 
    position: absolute; 
    word-break: normal; 
    background-color: white; 
    left: 220px; 
}

источник

2016-05-05 07:37:59

Проблема заключается в том, что в Div-главный DIV у вас есть две колонки, одна с фиксированной шириной и один с процентами ширина. Это приведет к тому, что ширина вашего макета будет «странной». Вы можете быстро исправить его, изменив размер ваших div с фиксированной шириной.

Проблема с вертикальной прокруткой вызвана overflow-y: scroll; в корпусе: отмените его, и он будет работать.

Я видел слишком много position:absolute в вашем коде ... опасно, используйте его с осторожностью. Используйте относительное позиционирование, более сложное, но более полезное.

источник

2016-05-05 07:43:58

HTML простирается больше размера экрана

ответ

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