Хромированная проблема с дисплеем: таблица

Я уже возился с попыткой получить боковую панель, чтобы оставаться прикрепленной к центральному div, и у меня она в основном работает в Firefox и IE, но по какой-то причине она не работает в Chrome. Моя проблема заключается в том, что при изменении размера окна левая боковая панель больше не распространяется на нижнюю часть страницы в хроме. Весь код приведен ниже, поэтому вы можете видеть, что я вижу в ваших собственных браузерах.Хромированная проблема с дисплеем: таблица

Мой вопрос: почему Chrome действует таким образом, и есть ли способ для меня исправить это? Моя версия Chrome - 28.0.1500.95.

Спасибо.

HTML:

<html> 
<header> 
    <link rel="stylesheet" href="test.css"/> 
</header> 
<body style="margin:0"> 
    <div> 
     <div class="width main table"> 
      <div class="relative-float-left" style=" width:0px; height: inherit; "> 
       <div class="relative-float-left sidebar table"> 
        --Some lorem ipsum here-- 
        <br style="clear: both; " /> 
       </div> 
      </div> 
      <div class="relative-float-left content"> 
        --Some lorem ipsum here-- 
      </div> 
      <br style="clear: both; " /> 
     </div> 
    </div> 
</body>

CSS:

.relative-float-left {position:relative; float:left;} 
.width {width:33%;} 
.table {display:table;height:100%;} 
.sidebar {width:30px;right:45px;background-color:yellow;} 
.content {margin-left: 10px; width: 95%; background-color: orange;} 
.main {background-color:blue; width:50%; margin:auto;}

Edit: Я хочу, чтобы центр DIV динамически размер с боковой панели, чтобы быть исправлены. Содержимое внутри боковой панели не может быть обрезано, и я хочу, чтобы какой-либо контент, который не мог уместиться на странице, чтобы быть нажатой и сделать страницу больше (поэтому я не хочу использовать внутреннюю прокрутку для содержимого (оранжевый) div. для беспорядочного кода было просто легче проверить доказательство концепции.

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

источник

2013-08-23 derigible

попробуйте использовать гибкие коробки. У нас не будет проблем с такими проблемами позже. посетите https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes – Rahul

@JoshC это макет, как описано выше (левая боковая панель перемещается по централизованному div). Если вы знаете другой способ сделать это, я был бы более чем счастлив использовать его. Я отредактировал мой вопрос, чтобы добавить еще несколько требований. И Рахул, я посмотрю на эти flexboxes, поскольку они выглядят очень многообещающими, но мне все равно хотелось бы ответить, почему это не работает в Chrome, но это происходит в других браузерах, и если есть исправление. – derigible

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

вы имеете в своем источнике вместо <head><header> Это приводит к тому, документ недействительным, не потому, что вы не можете иметь заголовок в этой позиции - браузер автоматически вставляет a <body> запускает тег, а затем помещает заголовок внутри него, но потому, что в нем есть <link>, который должен находиться в голове, а не в теле. И тогда есть стартовый тег <body>, когда тело уже открыто, что тоже запрещено.

Редактировать: Я вижу, что вы отредактировали свой комментарий сейчас, значит, это означает, что вы больше не верите, что это причина проблем?

источник

2013-08-26 14:33:15

Это было частью проблемы, но это была не основная причина. Я все еще вижу некоторые проблемы с таблицей display: table. Я хочу документировать это лучше. Извините, я немного поспешил ответить. – derigible

Ничего, это была проблема.Я обнаружил, что пропустил стиль на одном из моих элементов. Сейчас он работает. Спасибо за помощь! – derigible

Хромированная проблема с дисплеем: таблица

ответ

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