используя display: table-cell с позицией: исправлено

Question

используя display: table-cell с позицией: исправлено

0

Я сделал один контейнер <div>, а внутри него два <div>: один - ширина 80%, а другой - 20% и должен быть position:fixed.

По какой-то причине общая ширина контейнера <div> больше, чем окно браузера.

как только я удаляю position:fixed справа <div> все в порядке, но мне нужно, чтобы <div> был position:fixed.

Вот мой код:

HTML

<div class="test">
    <div class="leftSummary"></div>
    <div class="rightTasks"></div>
</div>

CSS

.test {
    width: 100%;
    display: table;
}
.leftSummary {
    width: 80%;
    display: table-cell;
}
.rightTasks {
    width: 20%;
    min-width: 275px;
    display: table-cell;
    vertical-align: top;
    position: fixed;
}

eyal halperin 22 окт. 2013, в 13:40

Источник

0

какое разрешение у вашего экрана? это может быть на 20% меньше, чем 275 пикселей вашей минимальной ширины.
C Travel 22 окт. 2013, в 11:07
0

Я хочу, чтобы правильный div был 20% или min-width: 275 в любом случае.
eyal halperin 22 окт. 2013, в 11:09
0

да, но это не мой вопрос. потому что если вы используете min-width:275px на экране шириной 1200 пикселей, 20% от этого будет 240 пикселей (меньше, чем минимальная ширина). и это означает, что экран не может быть, И 80% И min-width:275px . Потому что чем вы получаете ширину экрана 1235 пикселей (35 пикселей в ширину)
C Travel 22 окт. 2013, в 11:12
0

@ Mr.Polywhirl Могу я спросить, почему вы добавили height и background ко всем трем правилам? Пока я вижу в ревизиях OP, никогда не упоминайте и не намекайте на это.
Passerby 22 окт. 2013, в 11:16
0

Извините, но ... Должно быть, я опубликовал свои дополнения. :-(
Mr. Polywhirl 22 окт. 2013, в 11:17

Показать ещё 3 комментария

Теги:

html

css

css3

2 ответа

Ещё вопросы

какое разрешение у вашего экрана? это может быть на 20% меньше, чем 275 пикселей вашей минимальной ширины.
Я хочу, чтобы правильный div был 20% или min-width: 275 в любом случае.
да, но это не мой вопрос. потому что если вы используете min-width:275px на экране шириной 1200 пикселей, 20% от этого будет 240 пикселей (меньше, чем минимальная ширина). и это означает, что экран не может быть, И 80% И min-width:275px . Потому что чем вы получаете ширину экрана 1235 пикселей (35 пикселей в ширину)
@ Mr.Polywhirl Могу я спросить, почему вы добавили height и background ко всем трем правилам? Пока я вижу в ревизиях OP, никогда не упоминайте и не намекайте на это.
Извините, но ... Должно быть, я опубликовал свои дополнения. :-(

Marc Audet · Answer 1 · 2013-10-22T09-41-00.000Z

Здесь есть основная проблема. После того, как вы установили position: fixed на .rightTasks, свойство display вычисляется для block вместо table-cell.

Это изменит макет, и вам нужно переосмыслить свою разметку.

Ссылка: http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Кроме того, элементы с position: fixed расположены относительно порта представления, а не элемент блока, который их содержит. Таким образом, ширина 20% относится к порт представления, а не к родителю .test.

Если вы проверите элемент .rightTasks, вы увидите, что ширина составляет 20% от ширины порта просмотра, а не 20% ширины таблицы. Если вы установите ширину таблицы на 50%, эффект станет более очевидным.

sinanakyazici · Answer 2 · 2013-10-22T08-44-00.000Z

Вы не должны использовать min-width.

Демо-версия

РЕДАКТИРОВАТЬ

Если вы хотите использовать min-width с position: fixed, вы должны использовать top и right css. Если вы не хотите сталкиваться с проблемой, связанной с браузером, вы должны использовать reset.css

Демо-версия

Я удаляю min-width: 275px, но все же замечаю, что меняется.
Я отредактировал свой ответ. Вы смотрели первое живое демо? В этом не проблема.