Div не соответствует высоте в процентах

Question

Я хотел бы иметь ADS с правой стороны, когда пейзаж (ширина 25%) или снизу, когда портрет (высота 25%).

Пейзаж работает нормально, но на портрете он не соблюдает 25% основного div.

<div id="container"> 
    <div id="header"></div> 
    <div id="main" class="ORIENTATION"> 
     <div id="queue"></div> <!-- 75% --> 
     <div id="ads"></div> <!-- 25% --> 
    </div> 
</div> 

Пейзаж Пример: https://jsfiddle.net/gmrn24yd/9/

Портрет Пример: https://jsfiddle.net/gmrn24yd/8/

Answer 1

Проблема была с головой, он принимал 70px и Ваш #main высота 90%, он не может Что делать, если 70px составляет более 10% от документа? Он будет толкать другой div вниз, и поэтому части объявлений становятся обрезанными. Решение. Высота #main также должна основываться на заголовке. Вы можете использовать функцию calc css для вычисления. Сделайте несколько RnD и проверьте совместимость браузера.Here - это документация mdn для расчета.

Here является решением вашей проблемы.

*{ 
 
    box-sizing:border-box; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    padding: 0; 
 
    margin: 0; 
 
    top: 0; 
 
    left: 0; 
 
    display: inline-block; 
 
} 
 

 
/* HEADER */ 
 
#header { 
 
    width: 100%; 
 
    height: 70px; 
 
    position: relative; 
 
    background: #ed1c24; 
 
    padding: 20px 0; 
 
} 
 

 
/* MAIN */ 
 
#main { 
 
    width: 100%; 
 
    height: calc(100% - 70px); /*Calculate height based on header*/ 
 
    position: relative; 
 
    text-align: center; 
 
} 
 

 
/* MAIN LANDSCAPE */ 
 
#main.landscape { 
 
    display: inline-block; 
 
} 
 

 
#main.landscape #queue { 
 
    width: 75%; 
 
    height: 100%; 
 
    float: left; 
 
} 
 

 
/* MAIN PORTRAIT */ 
 
#main.portrait { 
 
    display: block; 
 
} 
 

 
#main.portrait #queue { 
 
    width: 100%; 
 
    height: 75%; 
 
} 
 

 
/* LANDSCAPE ADS */ 
 
#main.landscape #ads { 
 
    width: 25%; 
 
    height: 100%; 
 
    float: right; 
 
    background: #000; 
 
} 
 

 
/* PORTRAIT ADS */ 
 
#main.portrait #ads { 
 
    width: 100%; 
 
    height: 25%; 
 
    background: #000; 
 
}

<div id="container"> 
 
    <div id="header"></div> 
 
    <div id="main" class="portrait"> 
 
     <div id="queue"></div> 
 
     <div id="ads"></div> 
 
    </div> 
 
</div>

Answer 2

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

Answer 3

Я не мог видеть какие-либо проблемы во время выполнения этого кода. Только то, что вы дали 100% высоты и ширины для вида контейнера, отключено. Вы можете проверить код, обеспечивая фиксированную ширину и высоту внешнего контейнера