Полоса прокрутки?

275

12 марта 2017, 05:59

Почему на мониторе с разрешением по ширине 1366px при использование данного кода, страница с такой же 1366 px шириной не вмещается в экран браузера - появляется горизонтальная полоса прокрутки и к родительскому блоку добавляется отрицательный margin right -40px;

HTML:

<div class="main-wrapper">
    <div class="inner_wrapper"></div>
</div>

CSS:

    .main-wrapper {
        padding: 0 0 0 0;
        width: 1366px;
        min-height:100%;
        margin: 0 auto;
    }
    .inner_wrapper {
        max-height: 2054px;
    }

Спасибо!!

Answer 1

Используйте max-width и будет счастье!

http://codepen.io/anon/pen/jBBMJK

 .main-wrapper {
            padding: 0 0 0 0;
            max-width: 1366px;
            min-height:100%;
            margin: 0 auto;
        }
        .inner_wrapper {
            max-height: 2054px;    
        }
    <div class="main-wrapper">
        <div class="inner_wrapper">Some text</div>
    </div>

Answer 2

Задайте body { margin: 0; } чтобы обнулить отступ, установленный по-умолчанию. Проверьте масштаб страницы.

Все работает:

    .main-wrapper {
        padding: 0 0 0 0;
        max-width: 1366px;
        min-height:100%;
        margin: 0 auto;
    }
    .inner_wrapper {
        max-height: 2054px;    
    }
    body { margin: 0; }

<div class="main-wrapper">
    <div class="inner_wrapper">Some text</div>
</div>