Jump to content
  • 0

Высота float-элемента в 100% в FF и Chrome

Kray Storm

Asked by Kray Storm,

 Share

Question

Kray Storm Explorer

Kray Storm

Posted
Posted

Мда ))

Уже начал сходить с ума, пытаясь понять логику, по которой float-элемент игнорирует height и min-height в процентах.

Оказалось дело в Firefox.

Допустим, у нас есть float-блок, который находится в родителе. И нам нужно, чтобы даже при отсутствии контента (или малом количестве) у плавающего была бы какая-то минимальная заданная высота. Как бы логично и удобно использовать min-height, который берется от родителя. Но FF все обламывает.

Понятно, что такую модель можно реализовать и по-другому.

Но вопрос в том, что есть ли способ, не меняя подход, научить FF видеть эту высоту?

Перед нажатием на "отправить" проверил в Хроме. Та же проблема.

Тогда это уже интереснее. Кто может подсказать что-то на этот счет?

Код онлайн

Этот же код:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float height:100% error</title>

<style type="text/css">
html, body{
height:100%;
}
body{
margin:auto;
}
#main{
overflow:hidden;
width:50%;
min-height:70%;
margin:auto;
background:#ccf;
}
#left{
float:left;
width:50%;
min-height:100%;
background:#ffc;
}
</style>
</head>

<body>
<div id="main">
<div id="left">Плавающий блок</div>
</div>
</body>
</html>

У Оперы и даже jsfiddle.net все в порядке.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
SelenIT Explorer

SelenIT

Posted
Posted
Как бы логично и удобно использовать min-height, который берется от родителя

Поправка: не от родителя, а от указанной высоты родителя. Таков уж стандарт:

If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'
Link to comment
Share on other sites
  • 0
Kray Storm Explorer

Kray Storm

Posted
  • Author
Posted
Поправка: не от родителя, а от указанной высоты родителя.

Абсолютно верно. Поэтому-то мы и указываем все эти 100% от <html> до нужного блока. Иначе его высота определяется его же контентом, что делает взятие % уже для контента, в таком случае, забавной операцией с позиции логики.

Но в приведенном варианте это учтено и высота везде указана явно. Но почему-то конечный результат, так как я, понимает только Опера.

Это глюк, фича или какая-то моя невнимательность?

Link to comment
Share on other sites
  • 0
Kray Storm Explorer

Kray Storm

Posted
  • Author
Posted (edited)

У #main не указан height, только min-height. На нем цепочка рвется.

Офигеть. Это ж надо - какой абсурд. Выходит, что если думать "как роботы", то min-height - это лишь ограничитель высоты блока. А height - значение этой высоты. И для рассчета min-height для #left в %, нужно чтобы у #main было именно значение.

Торжественно добавим же его!

#main{

overflow:hidden;

width:50%;

height:1%;

min-height:70%;

margin:auto;

background:#ccf;

Теперь робот говорит "ОК. Наконец-то у нас для #main есть величина height:1%, которую мы все-равно не используем, потому как у нас есть ограничитель min-height:70%; Поэтому теперь(!) мы наконец можем отсчитать min-height:100% для #left, который возьмем от величины рассчитаной как min-height:70% для #main".

И на тот факт, что это будет та же величина, которую браузер точно также рассчитал от того же <body> в первый раз и без всякого height:1%, роботам плевать. Ну да! Там же не была указана высота! WTF?! :dash:

SelenIT спасибо за пояснение.

Теперь понятна вся суть слов "If the height of the containing block is not specified explicitly...". Логику отключаем. )

Edited by Kray Storm
Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted
Теперь робот говорит "ОК. Наконец-то у нас для #main есть величина height:1%, которую мы все-равно не используем, потому как у нас есть ограничитель min-height:70%; Поэтому теперь(!) мы наконец можем отсчитать min-height:100% для #left, который возьмем от величины рассчитаной как min-height:70% для #main".

Высота будет отсчитана от 1%, а не 70%

Link to comment
Share on other sites
  • 0
Kray Storm Explorer

Kray Storm

Posted
  • Author
Posted (edited)

Высота будет отсчитана от 1%, а не 70%

Вот тут Firefox уже не согласен и теперь с радостью отобразил #left на всю высоту #main (которая как раз min-height:70% от <body>), т.е. подход сработал. Опера, умница, изначально над этим не заморачивалась. А вот Хром, зараза, как и положено самому прогрессивному браузеру, лишь презрительно хмыкнул и назло посчитал от 1%, да (вот в нем я и не проверил).

Продолжая тему - что можно сделать с Хромом? Есть способ или лучше сразу признать подобную модель негодной?

PS: Откуда вообще такой разлет в таком банальном вопросе - от чего считать % для min-height?

Edited by Kray Storm
Link to comment
Share on other sites
  • 0
Cryolite Explorer

Cryolite

Posted
Posted (edited)

Почему нельзя указать height: 70% для #main? Ведь в реальности минимальная величина(высота) не может быть больше фактической. ( 1 > 70 ?). Я думаю, Хром правильно делает.

Edited by Cryolite
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • ilya.pokrov
      Некорректное отображение шапки сайта в Google Chrome
      By ilya.pokrov
      Добрый день.

      Появилась следующая проблема:
      При отображении сайта в любых браузерах - все работает корректно, кроме Google Chrome. Съезжает шапка сайта, а точнее то, что в css указывал позиционировать справа - располагается в левой части и закрывает логотип.

      Ну уж очень меня это напрягает. Не пойму, что нужно делать.

      Кто сталкивался с такой же проблемой?

      Сайт - ganzola.ru

      Заранее спасибо.
    • ioprst
      XMLHttpRequest не работает в chrome
      By ioprst
      Привет. Проблема в следующем. Есть одна страничка, на которой две вкладки, на второй вкладке исполняется js. В firefox'e все как надо, запускаю localhost и на какой-бы вкладке изначально я не оказался, анимация svg (js выполняет) работает, после перехода с 2ой вкладки на первую и обратно, анимация также работает. Что происходит в Хроме: Если я запускаю страницу (перезапускаю) и оказываюсь на второй вкладке, то анимация есть, стоит перейти с 2ой вкладки на 1ю и обратно, анимация пропадает. Суть в том, что в хроме при любом переходе между вкладками js перестает работать, либо проблема в XMLHttpRequest. Привожу js код, который исполняется на второй вкладке:
      var svgDoc; var xhr; var c1_boolFlow = false; window.onload = function() { svgDoc = document.getElementById("cns2Id").contentDocument; var timer = setInterval(anim, 100); var timerPost = setInterval(setPost, 100); } function anim() { c1anim(); } // Функция отправки запроса function setPost() { xhr = new XMLHttpRequest(); var send = ["c1_boolFlow"]; xhr.open("POST", 'cgi-bin/getVars.py', true); xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8') xhr.onreadystatechange = onResponse; xhr.send(send); } // Функция обработки ответа function onResponse() { if (xhr.readyState != 4) { return; } var respJSON = JSON.parse(xhr.responseText); c1_boolFlow = respJSON.c1_boolFlow; } ...  
    • senglory
      Чем заменить встроенный дебаггер в ФФ/Хроме?
      By senglory
      Только вот такое дерьмо не надо предлагать. Надо IDE типа Visual Studio, но с возможностью прицепиться к их процессам и дебагать их JS.
    • siemens1111@yandex.ru
      Chrome неверно отображает странницу
      By siemens1111@yandex.ru
      страница отображается во всех браузерах правильно, кроме chrome: баннера перекрывают выпадающее меню
      что не так для chroma?
      вот ссылка на страницу http://centrpol.com.ua/index.html
      прин-скрин прикрепил: слева во всех брайзерах верно, справа в Хроме не верно

    • S1lencer
      Проблема с блоками
      By S1lencer
      Доброго времени суток. Столкнулся с такой проблемой! https://jsfiddle.net/ysrg47Lh/, когда я делаю ширину левого и правого сайдбара в процентах то у меня все получается и блоки плавают как нужно, но стоит мне задать минимальную ширину левого и правого блока как правый блок смещается в низ под контент. 
      В итоге я не могу сделать так что бы левый и правый сайдбар был фиксированной ширины а контент принимал размер в зависимости от экрана и при этом не скидывал правый сайдбар под себя. 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept