содержания DIV перелив вне другого DIV

Перед тем, все this моя страница, и я был в середине создания макета, используя CSS @media запроса, для обнаружения и настройки страницы, в зависимости от пикселя браузера ....содержания DIV перелив вне другого DIV

Все шло хорошо, но если вы видите:

<div id='x'> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
</div>

вы заметите, она переполнена родителя div, который <div id='sep'></div> тОЛЬКО, если смотреть с рабочего стола.

Вы можете проверить исходный код страницы, или здесь полный код:

<html> 
<head><style> 
body{margin:0px; padding:0px;} 
#a{height:150px; background-color:#ffffff; border-bottom:1px solid #CCC;} 
#x{min-height:350px; margin-top: 10px; background-color:#CCC;} 
#y{min-height:30px; margin-top: 10px; background-color:#CCC;} 

@media all and (min-width:700px){ 

#b{width:100%; min-height:400px;} 
    #sep{width:960px; margin:auto;} 
    #x{width:65%; float:left;} 
    #y{width:32%; float:right; } 
#c{background-color:#656565; height:80px;} 
.for-mob{display:none;} 
.for-desc{background-color:green;} 
} 
@media all and (max-width:700px){ 
.for-mob{background-color:green;} 
.for-desc{display:none;} 
#b{width:100%; min-height:400px; } 
#x{width:100%; display:block; } 
#y{width:100%; display:block; } 
#c{background-color:#656565; height:100px;} 

} 
</style></head> 


<body> 

<div id='a'> <h1>I am header </h1> 
</div> 

<div id='b'> 
<div id='sep'> 

    <div id='x'> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    <h1>I am content </h1> 
    </div> 
    <div id='y'> 
    <h1>I am sidebar </h1> 
    </div> 
</div> 
</div> 
<div class='for-desc'><h1>If you shrink the browser, I become invisible</h1> </div> 
<div class='for-mob'><h1>If you maximize the browser, I become invisible</h1></div> 

<div id='c'> 
<h1> I am a simple footer </h1> 
</div> 
</body>

источник

2013-05-06 Anonymous

Как вы не указали высоту для #sep, это означает, что вы хотите, чтобы расширить с содержанием. Вы можете добавить overflow: hidden к нему, чтобы сделать его расширить

#sep { 
    margin: auto; 
    overflow: hidden; 
    width: 960px; 
}

Государства вашего требования в вопросе, если этот ответ не ответ ваш вопрос :)

источник

2013-05-06 20:55:44 Ejaz

но 'ширина: 960px;' поражения цели, сделать его мобильным удобно. – 2013-05-06 20:59:41

@kranzdot - ширина - это то, что вы отправили, Ejay не просто это исправить. – j08691

- независимо от ширины, это должно работать. – Sean

Нанести clearfix на не плавали DIV, что содержит плавающие divs (либо #b, либо #sep).

#sep:after { 
    content:""; 
    display:table; 
    clear:both; 
}

почерпнутые из http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php

источник

2013-05-06 20:58:07

Super. он это сделал. Я даже не видел/не читал все, что вы написали.Во всяком случае, я сделал сценарий с нуля, по очевидным соображениям сопоставимости, и, честно говоря, мне нужно ваше мнение, если мой код просто замечательный или посредственный, я строю сайт на его основе – 2013-05-06 21:02:15

содержания DIV перелив вне другого DIV

ответ

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