Отрегулируйте содержимое страницы на ширину окна браузера

Question

Я работаю над страницей, где вам нужно настроить ширину браузера. Когда окно браузера растянуто, «контент» должен расти (получена эта часть!), И когда окно сжимается до минимальной ширины, структура страницы должна оставаться неповрежденной. Поэтому я должен иметь возможность прокручивать, чтобы увидеть «боковую панель», но он прыгает вниз. Пожалуйста помоги!

Вот что я пытался до сих пор -

<div id="wrapper" style="width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue;"> 

    <div id="content" style="width:54%; 
    float:left; 
    min-width:400px; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green;"> 
    </div> 

    <div id="sidebar" style="width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow;"> 
    </div> 

</div> 

Спасибо.

Answer 1

Установите min-width: 850px; на обертке. Или то, что вы хотите, чтобы ваш минимум был. Поместите боковую панель первой и плывут правильно:

Fiddle: http://jsfiddle.net/mdares/JEVfC/

#wrapper { 
    width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue; 
    min-width: 850px; 
} 
#content { 
    min-width:400px; 
    width: 54%; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green; 
} 
#sidebar { 
    width:350px; 
    float:right; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow; 
} 

Кроме того - если вы не хотите, чтобы зазор между ними, чтобы расти, установить margin-left: 3%; на #sidebar. На #content удалите width: 54%; и добавьте overflow: hidden;

Answer 2

можно определить минимальную ширину:

#wrapper { 
min-width: 600px; 
} 

Answer 3

В вашем классе div добавьте минимальный параметр ширины в стиль, чтобы он не уменьшался ниже этого! Вы можете сделать это так:

<div id="wrapper" style="width:90%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    min-width:500px; /* Enter whatever minimum width you want your page to be */ 
    border: 1px solid blue;"> 

    <div id="content" style="width:54%; 
    float:left; 
    min-width:400px; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green;"> 
    </div> 

    <div id="sidebar" style="width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow;"> 
    </div> 

</div> 

Answer 4

Вы ознакомились с @media запроса или Отзывчивый веб-дизайн? Исправлено в CSS3. Это может помочь вам настроить ваш веб-сайт на размер экрана viwer.

Как это работает

Вам необходимо установить максимальные и Minimun with свойства, dependely (или нет) размера экрана (с помощью @media запроса). Проверить this

Решение вашей проблемы HTML

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

CSS

#wrapper { 
    max-width: 90%; 
    width:100%; 
    margin:0 auto; 
    height:400px; 
    background: #fff; 
    padding:20px; 
    border: 1px solid blue; 
} 
#content { 
    max-width: 54%; 
    width:100%; 
    float:left; 
    height:400px; 
    margin-right:3%; 
    border:1px solid green; 
} 
#sidebar { 
    with: 100%; 
    max-width:350px; 
    float:left; 
    margin-right:3%; 
    height:400px; 
    border:1px solid yellow; 
} 

JSFIDDLE

Answer 5

Является ли это Ва т вы ищете? check this

<div id="wrapper" style="width: 90%; 
    margin: 0 auto; 
    height:400px; 
    background: #fff; 
    padding: 20px; 
    border: 1px solid blue;"> 

    <div id="content" style="width: 54%; 
    float: left; 
    height:400px; 
    margin-right: 3%; 
    border: 1px solid green;"> Content </div> 

    <div id="sidebar-left" style=" width: 31%; 
    float: left; 
    margin-right: 3%; 
    height:400px; 
    border: 1px solid yellow;"> Sidebar </div> 
</div>