2014-12-26 5 views
0

У меня есть страница, и когда я делаю окно браузера горизонтально меньше, содержимое также становится все меньше и меньше, как я могу это исправить? Я просто хочу, чтобы контент поддерживал 100% ширину, и если в окне браузера отображается небольшая горизонтальная полоса прокрутки.Как отключить контент становится меньше?

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

Я попытался также сделать ширину содержимого как 1000px, но он не работает должным образом.

Вот CSS код:

body { 
    background: url(http://i.imgur.com/UAq9egG.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    font-family: Arial; 
} 

.content { 
    padding: 10px 10px; 
    background: rgba(255,255,255,0.3); 
    margin: 30px; 
} 

p { 
    color: white; 
} 

Здесь также jsfiddle demo

+0

чтения опять же, это не устраняет проблему :( – skyline33

+0

yes Я увижу горизонтальную полосу, но если окно браузера нормальное, это будет выглядеть так: http://i.imgur.com/XQJWFos.png – skyline33

+0

@ user2570380 Думаю, он на самом деле означает внутри самого 'div' –

ответ

0

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

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

+0

мой экран 1366x768 пикселей, и когда я попробую, чтобы сайт выглядел следующим образом http: //i.imgur. com/XQJWFos.png – skyline33

+0

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

0

Для меня работает отлично, просто добавив 1000px в .content классе:

.content { 
    padding: 10px 10px; 
    background: rgba(255,255,255,0.3); 
    margin: 30px; 
    width: 1000px; 
} 

Если вы хотите другое различное поведение для разных размеров браузера. Вы можете takea взглянуть на CSS @media запрос

http://www.w3schools.com/Css/css_mediatypes.asp

0

Попробуйте применить

white-space:nowrap; 
flot: left; 

в содержании. Пример: http://jsfiddle.net/c9pcrqv9/1/

+0

'Я попытался также сделать ширину содержимого, как 1000px, но он не работает должным образом. 'Он имеет в виду, что он хочет иметь фиксированные и сделать переполнение для прокрутки –

0

Предлагаю лучший ответ. Используя overflow-x:scroll , вы можете легко сделать контент для прокрутки по горизонтали.

Поэтому лучше создать контейнер для .content, присвоить ему свойства .content попалась, а затем, положить внутрь внутренней DIV фактического содержания с фиксированным с из 1000px и переполнения х: прокрутка

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