为了反应

Question

目标

设置一个div，它具有父级高度的80％，没有定义的高度。更具体地说，我想要一个响应效果。

问题

我有五个层次： .header ， .site ＆gt; .container ＆gt; 。右侧边栏和 .left内容。

标题的高度为50像素。网站的高度是视口高度 - 50像素（来自标题）。在网站的div里面，有一个容器。我想将他的高度设置为视口高度的80％ - 距离标题50个像素 - 网站的div偏移（1.5em填充）并且我没有使用百分比，只有像素 - 什么我需要做什么？

The FiddleJS

The problem is illustrated here.

技术细节

似乎工作得很完美，对吗？是的，工作完美...... 带像素。尝试将.left-content的高度更改为80％，您将看到我的问题。

代码（与FiddleJS相同）

HTML：

<div class="header">
</div>
<div class="site">
    <div class="container">
        <div class="container-head">
        </div>
        <div class="container-body">
            <div class="right-sidebar">
                Just a menu will be right here.
            </div>
            <div class="left-content">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS：

body {
    font-family: Tahoma
}

.header {
    background-color: #49c98e;
    width: 100%;
    height: 50px;
}

.site {
    padding: 1.5em 0;
}

.container {
    background-color: #c7c7c7;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.right-sidebar {
    background-color: #a94cd5;
    width: 300px;
    height: 100%;
    position: absolute;
    right: 0;
}

.left-content {
    background-color: #dbdbdb;
    width: 100%;
    height: 500px;
    overflow-y: scroll;
}

.left-content ul {
    padding: 25px 0;
    float: left;
}

.left-content ul li {
    background-color: #a94cd5;
    width: 150px;
    height: 100px;
    float: left;
    margin: 15px;
    list-style: none;
}

的jQuery / JavaScript的：

function calculateResponsiveWidth() {
    $realWidth = $(".container").width() - $(".right-sidebar").outerWidth(),
    $containerContent = $(".left-content");

    $containerContent.css({
        "width": $realWidth
    });
}

$(window).on("resize", function () {
    calculateResponsiveWidth();
});

calculateResponsiveWidth();

提前致谢。

更新v1

我开始认为使用百分比不是最佳选择。在容器区域之后，我想要一个25像素的间距 - 并且在不同分辨率下没有维持百分比。

有一个媒体查询建议，但我需要一个Internet Explorer 8的替代品 - 有人猜？也许JavaScript可以解决我的问题？

更新v2

问题通过一些JavaScript，数学和逻辑解决了。感谢所有贡献的人！

Answer 1

您需要在height:100%;，html和网站div上设置body，以便在应用于容器div时理解height:80%。当你这样做时，小提琴适合我。

http://jsfiddle.net/fvU5d/3/

除非您的意思是您希望容器div占网站div的80％，而不是视口的80％。

修改

试试这个（http://jsfiddle.net/fvU5d/5/）：

var newHeight = $(window).height() - 50;
newHeight = newHeight + 'px';
$('.site').css('height',newHeight);

Answer 2

没有为它的父母设置高度，它是???的80％。 css不知道100％是什么。

我将高度更改为80％并为其父级添加了一个高度。

http://jsfiddle.net/fvU5d/1/

.container-body{
    height: 600px;
}
.left-content {
    background-color: #dbdbdb;
    width: 100%;
    height: 80%;
    overflow-y: scroll;
}

Answer 3

为了反应

如果父级div的高度未知，您最好的选择是计算父级的高度，然后再使用百分比。然后，这意味着您可以控制父级的身高，因此可以相应地调整子级的大小。

JS小提琴：

https://jsfiddle.net/SNicholson99/hbw83z5L/

计算父级的身高：

document.getElementById('div-to-calculate').clientHeight

仅此行将仅获得第一个渲染的div的高度。为了在调整窗口大小时重新计算div的高度，我们需要做更多的工作。

将高度存储在状态中。
创建一个addEventListener，以侦听窗口的调整大小并更新高度状态发生变化。
将高度设置为要计算的父级的高度，以便定义的高度。

您的代码应如下所示：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      height: null
    }
  }

  calculateHeight = () => {
    this.setState({height: null}, () => {
      const height = document.getElementById('div-to-calculate').clientHeight;
      this.setState({ height })
    });
  }

  componentDidMount() {
    this.calculateHeight();
    window.addEventListener("resize", this.calculateHeight);
  }

   componentWillUnmount() {
     window.removeEventListener("resize", this.calculateHeight);
   }


  render() {
    return (
      <div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <div style={{flex: '0 0 50px', backgroundColor: 'blue'}}>Header</div>
        <div id="div-to-calculate" style={{
          flex: '1 0 auto',
          height: this.state.height ? `${this.state.height}px` : null
        }}>

          <div style={{ display: 'flex', height: '100%' }}>
            <div style={{ flex: '1 0 auto', backgroundColor: 'yellow' }}>
              <div style={{
                textAlign: 'center',
                width: '250px',
                margin: '0 auto',
                border: '1px solid black',
                position: 'relative',
                top: '50%',
                transform:'translateY(-50%)'
              }}>
                Middle Section
              </div>
            </div>
          </div>
        </div>
        <div style={{ flex: '0 0 50px', backgroundColor: 'blue'}}>Footer</div>
      </div>
    );
  }
}

父母身高80％（未知身高）的孩子

目标

问题

The FiddleJS

技术细节

代码（与FiddleJS相同）

更新v1

更新v2

3 个答案:

修改

为了反应