Как я могу сделать ширину = 100% - 100 пкс в CSS?
Пример ViewModel из WPF Application Framework (WAF) показывает, как ViewModel может быть протестирована с помощью модульного тестирования.
10 ответов
Короткий ответ: вы НЕ делаете этого в CSS. В Internet Explorer есть поддержка того, что называется выражениями CSS, но это не стандартно и определенно не поддерживается другими браузерами, например FireFox.
Лучше сделать это в JavaScript.
<div style="width: 200px; border: 1px solid red;">
<br>
<div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
<br>
</div>
<br>
</div>
Вы не можете.
Однако вы можете использовать поля для достижения того же результата.
CSS не может использоваться для анимации или любой модификации стиля для событий.
Единственный способ - использовать функцию javascript, которая вернет ширину данного элемента, затем вычтет из нее 100 пикселей и установит новый размер ширины .
Предполагая, что вы используете jQuery, вы можете сделать что-то вроде этого:
oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);
И с собственным javascript:
oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';
Мы предполагаем, что у вас установлен стиль css со 100%;
Используете ли вы стандартный режим? Я думаю, это решение зависит от этого.
Если вы пытаетесь создать 2 столбца, вы можете сделать что-то вроде этого:
<div id="outer">
<div id="left">
sidebar
</div>
<div id="main">
lorem ispsum etc...
</div>
</div>
Затем используйте CSS для его стилизации:
div#outer
{
width:100%;
height: 500px;
}
div#left
{
width: 100px;
height: 100%;
float:left;
background: green;
}
div#main
{
width: auto;
margin-left: 100px; /* same as div#left width */
height: 100%;
background:red;
}
Если вам не нужны 2 столбца, вы можете вероятно, удалите
Заполнение внешнего div даст желаемый эффект.
<html>
<head>
<style>
#outer{
padding: 0 50px;
border:1px solid black; /*for visualization*/
}
#inner{
border:1px solid red; /*for visualization*/
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
100px smaller than outer
</div>
</div>
</body>
</html>
Не могли бы вы сделать:
margin-right: 50px;
margin-left: 50px;
Изменить: Мое решение неверно. Решение, опубликованное Ариком Тенейком, предлагающее использовать div с шириной 100%, а затем вложить другой div с использованием полей, кажется более правильным.
У вас должен быть контейнер для вашего содержимого div, размер которого должен быть 100% - 100 пикселей
#container {
width: 100%
}
#content {
margin-right:100px;
width:100%;
}
<div id="container">
<div id="content">
Your content here
</div>
</div>
Возможно, вам потребуется добавить очищающий div непосредственно перед последним , если ваш div с контентом переполняется.
<div style="clear:both; height:1px; line-height:0"> </div>
Не могли бы вы вложить div с margin-left: 50px; и margin-right: 50px; внутри : 100%; ?
Установка полей тела на 0, ширина внешнего контейнера на 100% и использование внутреннего контейнера с полями влево / вправо 50 пикселей, похоже, работают.
<style>
body {
margin: 0;
padding: 0;
}
.full-width
{
width: 100%;
}
.innerContainer
{
margin: 0px 50px 0px 50px;
}
</style>
<body>
<div class="full-width" style="background-color: #ff0000;">
<div class="innerContainer" style="background-color: #00ff00;">
content here
</div>
</div>
</body>