Question

好的，所以这是一个简单的CSS问题，但我似乎无法在网上找到一个直接的答案来挽救我的生命。我有这个设置：

<div id="app">
    <div id="header_div"></div>
    <div id="menu_div"></div>
    <div id="content_div"></div>
</div>

然后是一些css：

@mixin relPos {
  position: relative;
  margin-top: 5px;
  width: 100%;
}

/*** App level ***/
#app {
  position: absolute;
  word-wrap: break-word;
  height: 100%;
  width: 100%;
}

/*** Landing Page ***/
#header_div {
  @include blackBorder;
  @include relPos;
  left: 0;
  height: 30%;
}

#menu_div {
  @include blackBorder;
  @include relPos;
  height: 10%;
}

#content_div {
  @include blackBorder;
  @include relPos;
  height: 56%;
  overflow: scroll;
}

但是dang divs没有响应高度风格元素的百分比...任何想法？

对于上下文，我正在构建一个React.js站点，所以我实际上在使用React元素对其进行渲染之后，将scss文件用于我的样式元素。很确定这无所谓，但仅仅因为我实际上并不知道所有事情，我会在这里提到。 :)提前感谢您的帮助！

- Jon

Answer 1

#top {
    position:absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
}

#one {
    position:relative;
    margin-top:1%;
    height: 30%;
    width: 100%;
    background-color:red;
}

#two {
    position:relative;
    margin-top:1%;
    height: 10%;
    width: 100%;
    background-color:green;
}

#three {
    position:relative;
    margin-top:1%;
    height: 57%; /* not 60% to account for the 5px margin */
    width: 100%;
    background-color:blue;
}

<div id="top">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

Answer 2

使用position: relative; property代替使用多个float:代替更清晰的代码。

您可以使用 3 float:left;完全实现此目标。保留父div position:relative;和3内float:left;。如果仍有必要，请使用position:absolute; 围绕所有这些元素嵌套另一个div。

Answer 3

所以这是我的React代码：

import React from 'react';
import ReactDOM from 'react-dom';

class LandingPage extends React.Component
{
  render()
  {
    return(
      <div>
        <div id="header_div">
          <h1> Header picture goes here </h1>
        </div>
        <div id="menu_div">
          <h2> here's for the menu buttons </h2>
        </div>
        <div id="content_div">
          <h3> and... the content to be loaded based on first load or menu button mash </h3>
        </div>
      </div>
    );
  }
};

export default LandingPage;

因为我正在使用react元素，所以我必须返回一个div，其中三个我正在尝试为我的LandingPage元素设置样式...所以我的结构实际上是......等等。因此，容器div不是应用程序，因为如果我在app上做了我的样式并不重要，我需要在中间的另一个div上进行。我在中间div添加了一个id =“main”，并将其设置为我的#app样式...一旦我做了，一切都很好！多谢你们！

CSS样式在绝对div内的相对div上，高度不占用

3 个答案: