不尊重身高百分比

Question

我希望在横向（25％宽度）时将ADS固定在右侧，或者在纵向（25％高度）时固定在底部。

景观工作正常，但在肖像方面，它并不尊重主要景观的25％。

<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的高度应该基于标题。你可以使用css的calc函数来计算。 执行一些RnD并检查浏览器兼容性。 Here是calc的mdn文档。

Here是您问题的解决方案。

＆＃13;

＆＃13;

*{
    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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

他尊重身高，只是你无法看到它，因为他的底部区域已经脱离身体并且他的位置是{{1}}。如果您使用chrome并且您知道如何查看元素的宽度和高度，您将看到它。看图像：

Answer 3

运行此代码时我看不到任何问题。因为您为容器视图提供了100％的高度和宽度，所以唯一的事情是切断。您可以通过为外部容器提供固定的宽度和高度来验证代码