html/css div вопросы размещения с током

Попробовали найти решения для этого и ничего не могут придумать. Вот основы того, что я хочу сделать.html/css div вопросы размещения с током

Хотелось бы, чтобы мой макет в 3 divs, раздел 1 является заголовком (логотип), раздел 2 представляет собой горизонтальное меню, раздел 3 представляет собой содержимое, специфичное для меню, которое изменяется в зависимости от вашего выбора меню. Я бы хотел, чтобы там не было полосы прокрутки браузера, и для секций 1 и 2 всегда появлялось, а раздел 3 простирается до нижней части окна браузера с видимой видимостью. Я положу свой код в конец, но он отлично работает в FF, но не в IE8. Я читал, что вы не можете использовать верх и низ в одном div, но почему бы и нет? он отлично работает в FF. Я попытался установить верх и использовать высоту 100%, но так как я устанавливаю верхнюю часть на 163, он помещает нижнюю часть на 163 пикселя ниже окна. Я хочу, чтобы раздел 3 увеличивался и уменьшался, когда окно расширяется или сжимается вертикально. Вот мой упрощенный код. Я использовал встроенные стили для минимизации работы с несколькими файлами и для удобства при тестировании. index.css является несущественным в этом контексте.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta content="text/html; charset=ISO-8859-1" 
     http-equiv="Content-Type"> 
    <title>Test Junk</title> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
    </head> 

    <body> 
<div style="background-color:#cccea2; text-align:center;height:136"> 
    section 1 
</div> 
<div style="background-color:#ccace2; text-align:center;height:27"> 
    section 2 
</div> 
<div style="background-color:#225522;  text-align:center;position:absolute;top:163;bottom:0;width:100%;overflow-y:scroll;overflow-x:hidden;"> 
section 3  
</div> 
</body> 
</html>

UPDATE: У меня есть некоторый успех, используя xhtml doctype, работая над хорошим решением. Но я нашел это на другом примере, продолжая длительный поиск решения. Я по-прежнему не понимаю, почему вы не должны использовать TOP и BOTTOM в одном и том же div, это две разные вещи.

источник

2012-04-09 Joe

Использование сверху и снизу в то же время не работает, Firefox использует первый найденный. Единственный способ, которым это будет работать в каждом браузере, - использовать JavaScript. Если вы используете jQuery, вы можете установить верхнюю часть 163px, как вы делаете, а затем установить высоту высоты документа - 163px – aurbano

Я получил раствор образца, используя другой тип документа. Я до сих пор не понимаю, почему люди говорят, что я не должен использовать TOP и BOTTOM в одном div. Для меня это то же самое, что сказать, что не используйте margin-top и margin-bottom в одном div. Я не понимаю.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 

    <head> 
    <meta content="text/html; charset=ISO-8859-1" 
     http-equiv="Content-Type"> 
    <title>Test Junk</title> 
    </head> 
<style> 
body { 
    background-color:#99cc99; 
    margin:0; 
    padding:0; 
    font-family: Arial, Tahoma, Times; 
    font: Times; 
    font-size: 10pt; 
    overflow:hidden; 
    width:100%; 
    height:100%; 
} 
</style> 
    <body> 
<div style="background-color:#cccea2;width:100%;text-align:center;height:136px;"> 
    section 1 
</div> 
<div style="background-color:#ccace2; position:absolute;top:136px;width:100%;text-align:center;height:27px;"> 
    section 2 
</div> 
<div style="background-color:#225522; text-align:center;position:absolute;top:163px;bottom:0px;width:100%;overflow-y:scroll;overflow-x:hidden;"> 
section 3a <br> 
section 3b <br> 
section 3c <br> 
section 3d <br> 
section 3e <br> 
section 3f <br> 
section 3g <br> 
section 3h <br> 
section 3i <br> 
section 3j <br> 
section 3k <br> 
section 3l <br> 
section 3m <br> 
section 3n <br> 
section 3o <br> 
section 3p <br> 
section 3q <br> 
section 3r <br> 
section 3s <br> 
section 3t <br> 
section 3u <br> 
section 3v <br> 
section 3w <br> 
section 3x <br> 
section 3y <br> 
section 3z <br> 
section 3aa <br> 
section 3ab <br> 
section 3ac <br> 
section 3ad <br> 
section 3ae <br> 
section 3af <br> 
section 3ag <br> 
section 3ah <br> 
section 3ai <br> 
section 3aj <br> 
section 3ak <br> 
section 3al <br> 
section 3am <br> 
section 3 <br> 
section 3 <br> 
section 3 <br> 
section 3 <br> 
section 3 <br> 
section 3 <br> 
section 3 <br> 
section 3 <br> 
</div> 
    </body> 
</html>

источник

2012-04-10 22:19:04 Joe

Иногда, когда что-то помечено, мы не всегда делаем правильный звонок. Я рассмотрел ответ, и он подходит для вопроса. Если это помогло вам решить проблему, вы можете принять ответ, нажав кнопку слева. – casperOne

Использование сверху и снизу неправильно. Просто потому, что он работает в FF, это не делает его правильным. Вы пробовали:

padding-bottom: 1000em; 
margin-bottom: -1000em;

источник

2012-04-09 17:49:45

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

Хорошо, не работает. Это просто сделало нижний div действительно большим, чего я не хочу. Я хочу, чтобы мой нижний div начинался с 163px и расширялся до нижней части текущего окна и автоматически расширялся и сокращался, если пользователь меняет высоту окна. Я знаю, что могу сделать это с помощью jscript, но я ДОЛЖЕН иметь возможность сделать это с помощью CSS. – Joe

-1

попробовать этот

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
     <head> 
     <meta content="text/html; charset=ISO-8859-1" 
      http-equiv="Content-Type"> 
     <title>Test Junk</title> 
     <link rel="stylesheet" type="text/css" href="index.css"> 
     </head> 

     <body> 
    <div style="background-color:#cccea2; text-align:center;height:136"> 
     section 1 
    </div> 
    <div style="background-color:#ccace2; text-align:center;height:27"> 
     section 2 
    </div> 
    <div style="background-color:#225522;text-align:center;bottom:0;width:100%;overflow-y:scroll;overflow-x:hidden; height:100%;"> 
    section 3  
    </div> 
    </body> 
    </html>

источник

2012-04-09 19:13:14 srini

Спасибо за ответ.Пробовал это, и похоже, что он делает в основном то же самое, что и при попытке установить вершину на 163 и высоту до 100%, она выталкивает остальную часть раздела 3 div из видимого окна. Мне, вероятно, придется решить это с помощью javascript, но надеялся, что смогу сделать это с помощью только css. – Joe

Вы используете неправильный doctype и находитесь в режиме quirks. Используйте это вместо: <!DOCTYPE html>

Вы говорите, что начали использовать доктрину XHTML, поэтому она лучше работает для вас, потому что она выводит вас из причуд. Однако вы не должны использовать этот, потому что я уверен, что вы не используете разметку XHTML.

Кроме того, вы не поставили единицы в свой CSS. Вы ДОЛЖНЫ включать px или em или проценты для любых предоставленных значений.

источник

2012-04-14 02:14:50 Rob

Протестировал рекомендованный тип doctype и, похоже, работает как в FF, так и в MSIE. Я проверю его еще немного и убедитесь, что проблем нет, но спасибо за это. У меня на самом деле есть единицы в моем обновленном решении, так что, вероятно, это часть моей проблемы. Извините, мне потребовалось некоторое время, чтобы ответить, не проверил этот пост. – Joe

html/css div вопросы размещения с током

ответ

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