CSS Stretch to Available Width

Как создать элемент уровня блока, например, div растянуть до доступной ширины?CSS Stretch to Available Width

Я знаю, что это может показаться, что вопрос с очевидным ответом, но это чуть чуть сложнее, чем это кажется, посмотрите на эту Fiddle:

http://jsfiddle.net/spryno724/pZKgv/

CSS-множеств а левое и правое поле для содержания div до 20% с каждой стороны. Установка свойства width заставляет его растягивать 100% от оригинального доступного пространства, в результате чего он выливается со стороны экрана, когда 20% полей добавляются с каждой стороны.

Как это можно зафиксировать, так что 20% полей все еще существует, но div растягивается, чтобы заполнить оставшееся пространство между ними?

источник

2012-03-10 Oliver Spryn

сделать ширину div 60%? – dave

Дэйв, это должен быть ответ, а не комментарий. –

Uhmmmm ..... * светлое чувство * Да. Я не знаю, почему я об этом не думал ??? Спасибо, Дейв. –

Это то, что вы имели:

.error { 
    border: 1px solid black; 
    display: inline-block; 
    margin-left: 20%; 
    margin-right: 20%; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
}

Попробуйте это:

.error { 
    border: 1px solid black; 
    margin-left: 20%; 
    margin-right: 20%; 
    top: 0px; 
}

источник

2012-03-10 00:23:07

Да, это работает, но мне нужно «фиксированное» свойство, хотя ... –

Это зависит от того, что вы хотите сделать ... вам нужно исправлено, если вы хотите поместить свой div относительно окна браузера ... (http://www.w3schools.com/cssref/pr_class_position.asp) –

Да, я хочу, чтобы это было исправлено относительно окна браузера –

чистый способ я вижу, что вы собираетесь об этом в стороне от указанной точки (задания ширины до 60%) заключается в том, чтобы заключить эту ошибку в контейнер внутри контейнера и добавить к нему свойство position:fixed. Таким образом, вы можете создать свое сообщение об ошибке и не беспокоиться о проблемах стиля, которые могут возникнуть в результате позиционирования самого элемента (например, цвет фона, проблемы с заполнением или переполнение).

HTML

<div class="fixed"> 
    <div class="error">Error!!!</div> 
</div>

CSS

.error { 
    border: 1px solid black; 
    margin-left: 20%; 
    margin-right: 20%; 
} 


.fixed { 
    position: fixed; 
    top: 0px; 
    left:0; 
    right:0; 
}

Demo

источник

2012-03-10 09:24:26

Убедитесь, что корпус имеет 0 отступы и поля.

Любое div внутри должно занимать все места.

источник

2013-07-28 01:00:38 winsly

CSS Stretch to Available Width

ответ

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