Помогите решении проблемы начинающему.

Borodulka · October 30, 2015

Есть 2 слоля:

1 - 40% в ширину, но не менее 200пикселей, 100% в высоту, залика фона черным, fixed. в этом сое меню.

2 - 60% в ширину, не статичный. всем все остальное.

Собственно в впринципе как их расположить рядом - не проблема.. это все сделано, прочитано, реализовано и понято, НО!

Когда сжимаешь экран - левое поле доходит до 200 пикселей и останавливается. Правое же поле все-равно сжимается и текст заходит за левое поле.

Как сделать так, чтобы правое поле не заходило за левое??

Пример кода:

<body>

</div>

</body>

CSS:

.fon {width:40%; min-width:200px;position:fixed; background-color:#000000; height:100%; float:left}

.content {margin-left:41%; }

infidel · November 2, 2015

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

P0jar · October 30, 2015

Интересно-интересно. Может быть, это специфика белого бэкграунда .content? Ибо при

<style>    .fon { width:40%; min-width:200px; position: fixed; background-color:#000000; height:100%; float:left }    .content { margin-left: 41%; position: fixed; width: 100%;  height: 100%; color: black; background-color: aqua; } </style>

у меня всё работает так, как тебе нужно.

Borodulka · October 31, 2015

Интересно-интересно. Может быть, это специфика белого бэкграунда .content? Ибо при
<style>    .fon { width:40%; min-width:200px; position: fixed; background-color:#000000; height:100%; float:left }    .content { margin-left: 41%; position: fixed; width: 100%;  height: 100%; color: black; background-color: aqua; } </style> 
у меня всё работает так, как тебе нужно.

.content { margin-left: 41%; position: fixed; width: 100%; height: 100%; color: black; background-color: aqua; } - position: fixed - это не приемлемо, т.к. содержание слоя может превышать размеры экрана, а мозилла в данном случае вообще не отображает полосы прокрутки

В этом то и вся проблема...

Edited October 31, 2015 by Borodulka

Анна · October 31, 2015

http://htmlbook.ru/layout/rezinovaya-shirina-navigatsiya-sleva вам это нужно получить? Проставьте там свои width:40%; min-width:200px;

Borodulka · November 2, 2015

http://htmlbook.ru/layout/rezinovaya-shirina-navigatsiya-sleva вам это нужно получить? Проставьте там свои width:40%; min-width:200px;

Это я изучал, к сожалению это не то.

Анна, я же написал, проблема с ПРАВОЙ колонкой... с левой все хорошо... ПРАВАЯ при сжимании поля заходит за левый... скачайте код и сами увидите возникающую проблему, решить которую я не в силах.

Borodulka · November 2, 2015

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

И это пока действительно единственный вариант... и про дефолтные отступы - тоже верно... если их обнулить то дейсвительно все садится как надо...

Спасибо за совет...

Однако, гуру верстки, хотелось бы решить сие с использованием слоев )))

Edited November 2, 2015 by Borodulka

Анна · November 2, 2015

скачайте код

Вы должны были сами удобно его нам представить.

Раз таблицы вас устроили, то может такой вариант подойдет: https://jsfiddle.net/8c8sko37/

Да, кстати, в вашем примере

.fon {width:40%; min-width:200px;position:fixed; background-color:#000000; height:100%; float:left}

float не работает, так как position:fixed его отменяет.

Edited November 3, 2015 by Анна

Sign In

Помогите решении проблемы начинающему.

Question

Borodulka

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

infidel

Link to comment

Share on other sites

P0jar

Link to comment

Share on other sites

Borodulka

Link to comment

Share on other sites

Анна

Link to comment

Share on other sites

Borodulka

Link to comment

Share on other sites

Borodulka

Link to comment

Share on other sites

Анна

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information