Ширина 100% Более 100% экрана - PullRequest
Новая
       2

Ширина 100% Более 100% экрана

0 голосов
/ 11 февраля 2012

Я создаю узкую таблицу стилей для адаптивного сайта. Он вступает в силу, когда ширина браузера составляет от 0 до 400 пикселей. (См. Ниже) 

<link href="css/narrow.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 400px)" />

Моя цель - постоянно центрировать контент в браузере, независимо от его размеров. Проблема в том, что div обертки, кажется, остается на ширине 400 пикселей и не реагирует на ширину браузера, даже если div обертки установлен на 100%.

Вот HTML: 

<body>

    <div id="wrapper"> <!-- Start Wrapper -->

        <div id="sidebar"> <!-- Start Sidebar -->
        </div> <!-- End Sidebar -->

        <div id="mainContent"> <!-- Start Main Content -->

            <div id="about"> <!-- Start About -->
            </div> <!-- End About -->

            <div id="services">  <!-- Start Services --> 
                 <div id="servicesWrapper"> 
                 </div>
            </div> <!-- End Services -->

            <div id="work"> <!-- Start Work -->
            </div> <!-- End Work -->

            <div id="contact"> <!-- Start Contact -->
            </div> <!-- End Contact -->

        </div> <!-- End Main Content -->


    </div> <!-- End Wrapper -->
    </body>

Вот CSS 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

#wrapper {
    text-align: center;
    width: 100%;
}

#sidebar {
    background-color: #FFF;
    width: inherit;
    height: 300px;
    top: 0;
    margin-bottom: 10%;
    position: fixed;
    z-index: 2;
}

#mainContent {
    margin-left: auto;
    margin-right: auto;
}

#about {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
    min-height: 600px;
    max-height: 100%;
    position: relative;
    margin-top: 350px;
    z-index: 1; 
}

#services {
    width: 65%;
    margin-left: 5%;
    min-height: 600px;
    max-height: 100%;
}

#work {
    width: 65%;
    margin-left: 5%;
    height: 600px;
    max-height: 100%;
}

#contact {
    width: 65%;
    margin-left: 5%;
    height: 600px;
    max-height: 100%;
}

Ответы [ 2 ]

1 голос
/ 11 февраля 2012

Во-первых, text-align: center работает только для встроенных элементов. Отцентрируйте содержащий элемент #wrapper, используя поля margin: 0 auto. Это не будет иметь большого значения, если ваша ширина 100%.

Ваш медиа-запрос (поправьте меня, если я ошибаюсь) не требует min-width, только свойство max-width. Максимальная ширина говорит: «Не используйте эту таблицу стилей, если ширина больше 400 пикселей».

Исходя из моих тестов, ваш код выше с моими небольшими изменениями работает в Chrome, FireFox и IE9 (но не в IE8 и ниже).

1 голос
/ 11 февраля 2012

Это не твоя проблема. Ваша проблема в том, что вы пытаетесь использовать text -align для центрирования элемента block . Если вы хотите, чтобы div выполнялся при выравнивании текста, вам нужно установить display:inline-block; для него.

См. Вертикальное выравнивание элемента блока с изображением? для получения более подробной информации об этом (для вертикального случая, но применима та же идея)

...