Как остановить фиксированное позиционирование, идущее отрицательно

Question

Я обновляю сайт с отзывчивым дизайном, который имеет весь контент в контейнере ширины 1000 пикселей, который находится на видовом экране. Я хочу использовать фиксированную боковую панель, но хочу, чтобы весь контент по-прежнему оставался равным 1000px и был сосредоточен в окне просмотра, а когда видовое окно было меньше 1000 пикселей, чтобы работать с загрузочным адаптивным дизайном. Моя текущая лучшая попытка выглядит следующим образом:

<div id="wrapper"> 
    <div id="page-content-wrapper"></div> 
    <div id="sidebar-wrapper"></div> 
</div> 

с CSS

#wrapper{ 
    height: 100%; 
    position: fixed; 
    left: calc((100vw - 1000px)/2); 
    top: 0; 
    max-width: 1000px; 
    width: 100%; 
    overflow: auto; 
} 
#page-content-wrapper{ 
    position: relative; 
    overflow-y: scroll; 
    height: 100%; 
    padding: 0px; 
} 
#sidebar-wrapper { 
    position: absolute; 
    top: 0px; 
    left: 250px; 
} 

Это прекрасно работает до тех пор, пока окно просмотра меньше 1000px, в это время начальной загрузки работает, например, меню рушится, но содержимое начинает исчезать влево. Это связано с тем, что левая позиция оболочки остается отрицательной для видовых экранов менее 1000 пикселей.

Как прекратить удаление контента, когда область просмотра меньше 1000 пикселей?

Answer 1

ответ SilentTremor это отличный способ приблизиться к такого рода проблемы. Точный код, который я использовал для моей ситуации было

@media (min-width: 999px) { 
    #wrapper{ 
    left: calc((100vw - 1000px)/2); 
    } 
} 

Answer 2

Создание медиа стольник, или использование predifined начальной загрузки медиа-запросов

@media (max-width: 999px) { 
    #wrapper{ 
    left: calc((100vw - 800px)/2); 
    } 
} 

@media (max-width: 799px) { 
    #wrapper{ 
    left: calc((100vw - 400px)/2); 
    } 
} 

@media (max-width: 399px) { 
    #wrapper{ 
    left: calc((100vw - 200px)/2); 
    } 
}