3

目标

设置一个 div，其高度为没有定义高度的父级的 80%。更具体地说，我想要一个responsive-effect。

问题

我有五层：.header、.site > .container > .right sidebar和.left content。

标题的高度为 50 像素。站点的高度是视口高度- 50 像素（从标题开始）。在站点的 div 内部，有一个容器。我想将他的高度设置为视口高度的 80% - 距标题 50 像素 - 网站的 div 偏移量（1.5em 填充）并且我没有使用百分比，只有像素 - 我需要做什么？

FiddleJS

问题在这里得到说明。

技术细节

似乎工作完美，对吧？是的，完美地工作......与像素。尝试将高度更改.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、数学和逻辑解决了这个问题。感谢所有贡献的人！

4

3 回答 3

1

您需要height:100%;在html、body和 site div 上进行设置，以便height:80%在应用于容器 div 时能够理解 。当你这样做时，小提琴对我有用。

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);
于 2013-06-05T13:13:32.013 回答
0

没有为其父级设置高度，它是???的 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;
}
于 2013-06-05T12:58:53.020 回答
0

反应

如果父 div 的高度未知，最好的办法是在使用百分比之前计算父 div 的高度。这意味着您可以控制父母的高度，因此可以相应地调整孩子的大小。

JS小提琴：

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

计算父项的高度：

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

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

  1. 将高度存储在状态中。
  2. 创建一个 addEventListener 监听窗口的大小调整并在更改时更新高度状态。
  3. 在您正在计算的父级的高度上设置高度，使其具有定义的高度。

您的代码应如下所示：

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>
    );
  }
}
于 2018-08-23T10:10:33.350 回答