CSS Горизонтально расширяющиеся диапазоны

-1

Я пробовал эти семь способов с воскресенья, и я продолжаю идти.CSS Горизонтально расширяющиеся диапазоны

Полосы цвета или то, что у вас есть, которые простираются до пределов видимой страницы, кажется очень распространенным запросом в интернет-форумах/блогах, однако для каждого из двух основных сценариев я сталкиваюсь с такими же неудобными проблемами, которые сделать решение несостоятельным. В моем разочаровании я повернулся сюда.

HTML

<body> 

<div class="container"></div> 

<div class="content-container"> 

    <div class="content"> 

     Hello, I need some text that extends for a bit, so I'll just write this in the div and all will be good. 

    </div> 

</div> 

<div class="container"></div>

Сценарий 1 Вы установили контейнер DIV в ширину: 100%, а затем ребенок Div по фиксированной ширины и края: 0 авто; это эффективно расширяет этот div до контуров видимого экрана в любое время.

html, body { 
width: 100%; 
} 

.container { 
height: 20px; 
background-color: #377ab7; 
margin: 0 auto; 
} 

.content-container { 
height: 100px; 
margin: 0 auto; 
} 

.content { 
width: 300px; 
}

Сценарий 1 выпуск Когда экран изменяются таким образом, что фиксированная ширина дочернего DIV является слишком большой для окна появляется полоса прокрутки. Это абсолютно нормально и желательно, однако, когда вы используете полосу прокрутки, расширенные полосы цвета расширяются только до 100% видимого окна.

Fiddle 1 (вы должны изменить размер окна браузера, чтобы surpase размера фиксированной шириной содержимого DIV, а затем использовать полосу прокрутки, вы увидите синие полосы не проходят мимо 100% от размера окна .) https://jsfiddle.net/b1dht69u/2/

Сценарий 2 Вы установили переполнение-х: спрятанный на теле, а затем запустить очень высокий отрицательный запас, с соответствующим положительным дополнением.

body { 
overflow-x: hidden; 
} 

.container { 
height: 20px; 
background-color: #377ab7; 
margin: 0 -9999px; 
padding: 0 9999px; 
} 

.content-container { 
height: 100px; 
margin: 0 -9999px; 
padding: 0 9999px; 
} 

.content { 
width: 300px; 
}

Это абсолютно здорово, пока вы снова не измените размер экрана.

Сценарий 2 выпуск При изменении размера от фиксированной ширины дочернего div нет полосы прокрутки.

Fiddle 2 https://jsfiddle.net/mnodvLvg/1/

То, что я ищу, это лучшее из обоих миров. Я надеюсь, что будет иметь полосу цвета, которая постоянно распространяется на концы видимой страницы, но когда размер браузера изменяется за пределы фиксированной ширины внутреннего divs, появляется полоса прокрутки.

источник

2015-07-21 ashcanschool

Примечание, идентификаторы ** должны быть уникальными. – j08691

Вы имеете в виду вот это - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen –

Я не уверен, какова ваша фактическая проблема но вы можете исправить полосу прокрутки в своей первой скрипте, добавив «margin: 0;» в селектор 'html, body {}'. – TylerH

Это любопытная проблема, и я никогда не задумывался, так как я в основном работаю с отзывчивыми макетами.

Однако, there is a nice article Николас Cerminara о решении вопросов с фиксированной шириной макета.

Ключом к этому является установка min-width на body{} и/или html{} в вашем CSS.

Интересно, что Stack Overflow использует эту технику для предотвращения взлома верхней панели навигации при изменении размера окна. Просто откройте свой веб-браузер DOM explorer на этом веб-сайте и отключите следующие правила стиля: body{min-width:1030px;} и html{min-width:1000px;} Вы увидите, что верхняя панель навигации разбивает ее макет и имеет ту же проблему, что и вы.

источник

2015-07-21 15:29:27 CreMedian

этот сценарий 2 с материалом 9999px на самом деле очень грязный, забудьте об этом.

Если вы проверите div, вы увидите, что проблема возникает не из самого div.container, а из тела.

Я бы решить эту проблему с:

html, body { 
    position: absolute; 
    min-width: 100%; 
    width: auto; 
}

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

Другая идея может заключаться в том, чтобы забыть эти .container DIVs и фактически сделать границы для контейнера .content, но я не знаю, что именно вы хотели бы сделать.

#content-container { 
    height: 100px; 
    margin: 0 auto; 
    border-top: 20px solid #377ab7; 
    border-bottom: 20px solid #377ab7; 
}

Удачи!

источник

2015-07-21 15:24:10

Если у вас есть фиксированная ширина для содержимого div, вы можете также установить min-width того же значения или больше на теге body. Это гарантирует, что он не может быть меньше вашего контента.

html, body { 
    width: 100%; 
    min-width: 300px; 
    margin: 0; 
}

источник

2015-07-21 15:29:43 bearfriend

Это просто добавит полосу прокрутки для всей страницы тела ... это правильная идея, но противоположность того, что вам нужно делать. Используйте max-width вместо #content. – TylerH

Это не имеет никакого смысла. Там будет полоса прокрутки в любом случае. Это просто говорит, убедитесь, что «тело» заполняет все это. Добавление 'max-width' в' # content' просто свалило бы все и полностью отрицало бы фиксированную 'width', которая у него есть. Кроме того, принятый ответ, по сути, говорит то же самое. – bearfriend

Вы хотите, чтобы вся страница была прокручиваемой влево/вправо, например, на 4%? Это ужасное поведение для Интернета. (PS - Я отправил свой первый комментарий выше, прежде чем OP принял ответ). Я предположил, что OP не хотел этого поведения, и что они хотели, чтобы дополнительный край был удален (в зависимости от целого «бит не соответствует размеру страницы»), но, по-видимому, OP * хочет * этого ужасного поведения. – TylerH

CSS Горизонтально расширяющиеся диапазоны

ответ

Смежные вопросы