Сетка 960 занимает всю ширину с изменением размера

У меня возникли проблемы с тем, чтобы мой 960.gs занимал всю ширину браузера. Я хочу, чтобы сетка была на 100% при изменении размера, то есть, если я прокручиваю текст, он будет меньше и займет меньше строк, но сетка все равно будет занимать 100% ширины.

Здесь есть этот вопрос Когда используя сетку 960, могу ли я по-прежнему иметь раздел заголовка шириной 100%? И ответ состоял в том, чтобы установить верхнюю часть на 100%. Я добавил код, но это не имеет никакого эффекта, равно как и установка ширины тела на 100% и всех div и т. Д. Что я делаю неправильно? Вот код:

<!doctype html>
<html>

    <head>
        <title>My Fragment</title>
        <meta charset="utf-8" />
        <!-- Symbols rendered -->
        <meta name="value" />
        <!-- Do not need to close -->
        <link rel="stylesheet" href="css/960_12_col.css">
        <style>
            body {
                background:green;
            }
            div {
                background: white;
            }
            .grid_4 {
                height: 100px;
            }
        </style>
    </head>

    <body>
        <div class="header" style="width:100%;"></div>
        <div class="mainWrapper container_12">
            <div class="grid_4" style="background:red">sdfds</div>
            <div class="grid_4" style="background:blue">sdfs</div>
            <div class="grid_4" style="background:yellow">sdfs</div>
            <div class="clear">sdfds</div>
        </div>
    </body>

</html>

Но это дает мне следующий результат:

введите здесь описание изображения

Я хочу, чтобы слева от красного столбца и справа от желтого столбца не было зеленого пространства, но это не так. Как избавиться от пробела с обеих сторон?

(Обратите внимание, что я новичок в css и Html и следил за изучением html в течение 30 дней и всем, что я нашел в Интернете.)


person Derrops    schedule 30.08.2015    source источник
comment
Не могли бы вы предоставить демо?   -  person AleshaOleg    schedule 30.08.2015
comment
Демо? Аааа... например, вы имеете в виду какой-то html-код того, что я сделал, с изображением вывода и объяснением, что с ним не так? Как что в вопросе?   -  person Derrops    schedule 30.08.2015
comment
Да, потому что, когда я вставляю ваш код в jsfiddle, я получаю другой результат с рассматриваемым изображением.   -  person AleshaOleg    schedule 30.08.2015
comment
Вам нужно иметь содержимое 960_12_col.css. Вам не нужно использовать jsfiddle, так как нет javascript. Вы можете просто использовать браузер, чтобы открыть html локально.   -  person Derrops    schedule 30.08.2015
comment
Я вставил в jsfiddle 960_12_col.css из GitHub, и код не работал, как на картинке :(   -  person AleshaOleg    schedule 30.08.2015
comment
Лол, ты думаешь, что помогаешь мне, а не наоборот. На моем компьютере есть index.html с содержимым, которое я разместил, а затем папка css, где находится 960_12_col.css, вам нужно будет скопировать содержимое в тег стиля, например тот, который у меня есть, где тело стилизовано, если вы хотите использовать jsfiddle.   -  person Derrops    schedule 30.08.2015


Ответы (1)


Прежде всего - <div class="header" style="width:100%;"></div> не упаковывает ваш контейнер.

Во-вторых: добавьте width: 100% к вашему классу mainWrapper вместо .header, но я знаю, что в сетке 960 жестко задана ширина, поэтому ваши столбцы с .grid_4 будут по-прежнему width: 300px.

Попробуйте использовать другую систему сеток с плавными макетами, например: http://www.designinfluences.com/fluid960gs/

person mwl    schedule 30.08.2015
comment
То есть ширина жестко запрограммирована для grid960? Нет возможности изменить размер столбцов? - person Derrops; 30.08.2015
comment
Да, посмотрите здесь: 960.gs/css/master.min.css - там являются .grid_4 { width: 300px; }, .grid_5 { width:380px; } и т. д. Используйте другую систему сетки, например unsemantic.com или getbootstrap.com - person mwl; 30.08.2015
comment
Спасибо, но мне грустно, что он не изменит размер моих компонентов, я просто потратил кучу времени): - person Derrops; 30.08.2015
comment
Замените файл 960.css на этот: designinfluences.com/fluid960gs/css/grid. css - это гибкая версия 960.gs - person mwl; 30.08.2015
comment
СПАСИБО!!!!!!!!!!!!!!!!! Так и получилось, офигенно. Не могу проголосовать за вас более одного раза, извините. - person Derrops; 30.08.2015