HTML/CSS Divs перемещение по размеру браузера

Question

У меня есть два div, которые мне нужно заполнить. Один из них автоматически изменяет размер, а другой фиксируется. Слева находится размер, размер которого находится слева, а фиксированный - справа. Это отлично работает, когда браузер находится на полном экране, но если я изменяю размер браузера до определенного размера, размер изменения размера сдвигается далеко правее под фиксированным div, в то время как фиксированный div находится в правильном месте. Как заставить div оставаться на месте при изменении размера окна браузера?

HTML:

<div class=wrapper> 
    <div class=right> 
     Right Fixed Sidebar 
    </div> 

    <div class=main> 
     Main Resizing Content 
    </div> 
</div> 

CSS:

.wrapper{ 
margin-top: 25px; 
min-width: 630px; 
} 
.main{ 
overflow: hidden; 
font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif; 
font-size: 20px; 
font-weight: 100; 
margin-left: 25px; 
height: 250px; 
background: green; 
} 
.right{ 
float: right; 
width: 300px; 
height: 250px; 
font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif; 
text-align: center; 
margin-right: 10px; 
margin-left: 10px; 
background: orange; 
} 

Answer 1

Таким образом, до тех пор, как вы можете иметь дело с IE9 + (и во всех реальных браузерах, за исключением Android браузера < 4.4), вам может сделать что-то довольно простое, но мега мощное.

HTML:

<div class=wrapper> 
    <div class=main> 
     Main Resizing Content 
    </div><div class=right> 
     Right Fixed Sidebar 
    </div> 
</div> 

CSS:

.wrapper { 
    margin-top:25px; 
    min-width:630px; 
    height:250px; 
} 

.right, 
.main { 
    display:inline-block; 
    vertical-align:top; 
    height:100%; 
} 

.right { 
    width:300px; 
} 

.main { 
    width:calc(100% - 300px); 
} 

Краткое объяснение:

• display:inline-block; имеет всю славу block элементов, но может быть отображен в строке ... vertical-align:top; если вы хотите разную высоту для элементов
• установить фиксированную ширину боковой панели на правой
• ширины .main элемента используется calc(), который делает именно то, что он выглядит как ... полную ширину контейнера минус фиксированную ширину (которая равна на правой боковой панели)

Here is a jsFiddle showing a working model.

откаты

самое замечательное в том, что display:inline-block; работает обратно IE8, поэтому единственная проблема, связанная с резервным подключением, - это установка ширины.

Если вы используете библиотеку обнаружения функций, такую ​​как Modernizr (которая, если вы этого не сделаете, вы должны быть), то вы можете сделать что-то, комбинируя CSS и JS.

JS:

if(!Modernizr.csscalc){ 
    var container = document.querySelector('.wrapper'), 
     main = container.querySelector('.main'), 
     right = container.querySelector('.right'); 

    main.style.width = (container.clientWidth - right.clientWidth); 
} 

Если вы используете JQuery вы можете использовать его синтаксис, просто пытается быть библиотека агностиком. Если вы не используете Modernizr, вы можете поместить его в условных комментариях в нижней части тела:

<!--[if lte IE 8]> 
    <script type="text/javascript"> 
     var container = document.querySelector('.wrapper'), 
      main = container.querySelector('.main'), 
      right = container.querySelector('.right'); 

     main.style.width = (container.clientWidth - right.clientWidth); 
    </script> 
<![endif]--> 

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