使用CSS根据高度

Question

所以我遇到了一个CSS格式问题，我希望能得到一些帮助。一般情况下，我的设置工作正常，根据屏幕大小调整菜单位置，使其始终垂直和水平居中等。

但是，我遇到了一个问题，如果你使观察窗口太小，元素开始重叠，这是不可取的。

这是一个显示我正在谈论的内容的小提琴。我希望绿色框强制下面的所有其他内容，因此它不再与红色框重叠（＆＃34; buttonContainerBase＆＃34; div中的所有内容）：

Fiddle

这里是HTML Div设置和相关的CSS：

＆＃13;

＆＃13;

#buttonContainerBase {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
}
.hCenterDiv {
  width: 370px;
  margin-left: auto;
  margin-right: auto;
}
.backgroundBoxDiv {
  position: absolute;
  top: 50%;
  height: 244px;
  margin-top: -112px;
  margin-left: 0px;
  width: 370px;
  overflow: auto;
  display: inline-block;
  text-align: center;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  opacity: 0.95;
  filter: alpha(opacity=95);
  background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
  background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
  background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
  box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
  width: 344px;
  height: 76px;
  margin-top: 5px;
  display: inline-block;
  background-color: red;
}
.dividingLineDiv {
  height: 2px;
  width: 370px;
  background-color: #335B84;
}
#myLogo {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 257px;
  height: 73px;
  background-color: green;
}
#contentWrapper {
  min-height: 300px;
}
.buttonContainerDiv {
  /*padding: 5px;*/
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
#studentLoginDiv {
  margin-bottom: 10px;
}
.customButton {
  padding: 0px;
  width: 225px;
  height: 34px;
  border: solid 2px #FFFFFF;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border-style: outset;
  background-color: #f5f5f5;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  cursor: pointer;
}
.customButton:hover {
  border: solid 2px #F5F5F5;
  border-style: inset;
  background-color: #f2f2f2;
}
.customButton:active {
  border: solid 4px #F5F5F5;
  border-style: inset;
  background-color: #D1D1D1;
}

＆＃13;

<div id="contentWrapper">
  <div id="buttonContainerBase">
    <div class="hCenterDiv">
      <div class="backgroundBoxDiv">
        <div class="elementContainerDiv">
          <div class="logoContainerDiv"></div>
          <div class="dividingLineDiv"></div>
          <div class="buttonContainerDiv">
            <input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
          </div>
          <div class="buttonContainerDiv" id="studentLoginDiv">
            <input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
          </div>
          <div class="dividingLineDiv"></div>
          <div class="buttonContainerDiv">
            <input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="myLogo"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

CSS游戏仍然是一种新的东西，所以如果事情看起来很蹩脚/尴尬，我会提前道歉。

Answer 1

这是因为#myLogo有position:absolute，所以：

• 更改为CSS中的position:relative
• 将DOM中的div移到顶部
• 删除#buttonContainerBase
的所有CSS

在backgroundBoxDiv

• 删除margin-top: -112px，这将是一种黑客攻击。

• 添加此代码：

  top: 0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  

注意这将在320px视图中重叠，因此您可能需要进行媒体查询。

.hCenterDiv {
  width: 370px;
  margin-left: auto;
  margin-right: auto;
}
.backgroundBoxDiv {
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
  height: 244px;
  width: 370px;
  overflow: auto;
  display: inline-block;
  text-align: center;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /*
	border: solid 2px #004586;
	background-color: #FFFFFF;
	*/
  opacity: 0.95;
  filter: alpha(opacity=95);
  background: -moz-linear-gradient(top, #FFFFFF 45%, #F5F5F5 75%);
  background: -webkit-gradient(linear, top, bottom, color-stop(45%, #FFFFFF), color-stop(75%, #F5F5F5));
  background: linear-gradient(180deg, #FFFFFF 45%, #F5F5F5 75%);
  box-shadow: 2px 2px 4px #244260;
}
.logoContainerDiv {
  width: 344px;
  height: 76px;
  margin-top: 5px;
  display: inline-block;
  background-color: red;
  /*	border: solid 2px #004586;	*/
}
.dividingLineDiv {
  height: 2px;
  width: 370px;
  background-color: #335B84;
}
#myLogo {
  position: relative;
  top: 5px;
  left: 5px;
  width: 257px;
  height: 73px;
  background-color: green;
}
#contentWrapper {
  /*
	column-count: 2;
	column-gap: 40px;
	*/
  min-height: 300px;
  
}
/******** BUTTONS *********/

.buttonContainerDiv {
  /*padding: 5px;*/
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
#studentLoginDiv {
  margin-bottom: 10px;
}
.customButton {
  padding: 0px;
  width: 225px;
  height: 34px;
  border: solid 2px #FFFFFF;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  border-style: outset;
  background-color: #f5f5f5;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 18px;
  cursor: pointer;
}
.customButton:hover {
  border: solid 2px #F5F5F5;
  border-style: inset;
  background-color: #f2f2f2;
}
.customButton:active {
  border: solid 4px #F5F5F5;
  border-style: inset;
  background-color: #D1D1D1;
}
/****** END BUTTONS *******/

<div id="contentWrapper">
  <div id="myLogo"></div>
  <div id="buttonContainerBase">
    <div class="hCenterDiv">
      <div class="backgroundBoxDiv">
        <div class="elementContainerDiv">
          <div class="logoContainerDiv"></div>
          <div class="dividingLineDiv"></div>
          <div class="buttonContainerDiv">
            <input class="customButton" id="instructorLogin" type="button" value="Instructor Login" onclick="window.open('http://www.google.com');" />
          </div>
          <div class="buttonContainerDiv" id="studentLoginDiv">
            <input class="customButton" id="studentLogin" type="button" value="Student Login" onclick="window.open('http://www.google.com/');" />
          </div>
          <div class="dividingLineDiv"></div>
          <div class="buttonContainerDiv">
            <input class="customButton" id="instructionalVids" type="button" value="Instructional Videos" onclick="window.open('https://www.youtube.com/');" />
          </div>
        </div>
      </div>
    </div>
  </div>

</div>