Как сделать div с полноэкранным, когда только браузер максимально

Question

Я хочу сделать мой div шириной 100%, но я хочу, чтобы ширина была статичной, поэтому при повторной калибровке браузера появится горизонтальная прокрутка (и это не будет, когда браузер будет максимизирован), поэтому я не хочу делать свойство width с width:100%, и я не хочу получать это значение из window.screen, потому что он дает вам полную ширину экрана, а не максимальную ширину браузера , поэтому Я не хочу быть похожим на это изображение, когда браузер не развернуто

Я хочу, как этот

и когда браузер максимизируется будет как (без горизонтальной прокрутки)

Answer 1

Вы, вероятно, слишком усложняете свою проблему. Что у вас есть фон (или div контейнер) определенной ширины, но вы не хотите, чтобы превышать, что ширина, поэтому использование CSS3 правила ширина:

.div_background-image-container { 
    width:100%; /* of whatever the screen size*/ 
    min-width:320px; /* For mobile devices or a size that you need */ 
    max-width:800px; /* The maximum size of this image */ 
    margin:auto; /* Centre the div*/ 
    display:block; 
} 

в этом Div вы также можете установите фоновое изображение и установите его, используя атрибут размера фона CSS3 contain, где изображение будет покрывать фоновое пространство. Вы также можете использовать cover в зависимости от того, какой выглядит лучше всего для вашей ситуации. См. http://www.w3schools.com/cssref/css3_pr_background-size.asp.

.div_background-image-container { 
    background: url(fingers_in_the_air.jpg); 
    background-size: contain; /* OR cover, please explore */ 
    background-repeat: no-repeat; 
} 

Из этого окно фона контейнера будет иметь минимальную ширину 320px и максимальную ширину 800 пикселей, а также в пределах этих параметров шириной 100% экрана, так что это не имеет значения, размера сами браузера или разрешения браузера, эти ограничения будут содержать изображение, и оно будет отображаться пропорционально в соответствии с инструкцией CSS background-size.

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

Answer 2

Использование window.innerWidth и screen.width (который дает развернутую ширину браузера). Используйте условное выражение, чтобы определить, когда показывать горизонтальную полосу прокрутки (например, переключая класс на тег body) и обернуть этот фрагмент кода в прослушиватель onresize.