相关疑难解决方法(0)

我正在开发一个Web应用程序,我希望内容能够填满整个屏幕的高度.

该页面有一个标题,其中包含徽标和帐户信息.这可以是任意高度.我希望内容div将页面的其余部分填充到底部.

我有标题div和内容div.目前我正在使用表格进行布局,如下所示:

CSS和HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

页面的整个高度都已填满,无需滚动.

对于内容div中的任何内容,设置top: 0;将把它放在标题下面.有时内容将是一个真实的桌子,其高度设置为100%.放在header里面content不会允许这个工作.

有没有办法在不使用的情况下达到相同的效果table？

更新:

内容中的元素div也将高度设置为百分比.因此,100%内部的东西div将填充到底部.两个元素也是50%.

更新2:

例如,如果标题占据屏幕高度的20%,则内部指定为50%的表#content将占用屏幕空间的40%.到目前为止,将整个事物包装在表中是唯一有效的方法.

我有一个非常奇怪的问题...在每个浏览器和移动版本中我遇到这种行为:

• 加载页面时所有浏览器都有一个顶级菜单(例如显示地址栏),当您开始滚动页面时,该菜单会向上滑动.
• 100vh仅在视口的可见部分计算,因此当浏览器栏向上滑动100vh时增加(以像素为单位)
• 所有布局都重新绘制并重新调整,因为尺寸已更改
• 对用户体验的糟糕跳跃效果

怎么能避免这个问题？当我第一次听到视口高度时,我很兴奋,我认为我可以将它用于固定高度块而不是使用javascript,但现在我认为唯一的方法是实际上javascript与一些resize事件......

您可以在以下位置查看问题:示例站点

任何人都可以帮我/建议一个CSS解决方案吗？

简单的测试代码:

/* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{ …

这是我的 React 代码。我有两个组件：BlackBox 和 SomeText。我希望 BlackBox 为全屏，而 SomeText 位于其下方。我假设一行中的两个 div 会按顺序呈现（彼此相邻或彼此下方，但本示例中的 BlackBox 完全位于 SomeText 之上）。

class BlackBox extends React.Component {
    render() {
        return (<div id="blackbox"></div>);
    }
}

class SomeText extends React.Component {
    render() {
        return(<div id="sometext">Hello</div>);
    }
}

class App extends React.Component {
    render() {
        return(
            <div>
                <BlackBox/>
                <SomeText/>
            </div>
        );
    }
}

这是使 BlackBox 全屏显示的 CSS 代码：

#blackbox {
    background-color: #00000;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

为什么 BlackBox 覆盖 SomeText？

我的网站有两列,现在背景颜色在左栏的最后一段内容(用于导航)结束.

我试过身高:100%,最小身高:100%; 似乎没有用.这是css.

.container {
    width: 100%;
    height:100%;
    min-width: 960px;
    background: #fbf6f0;
    margin: 0 auto; 
    overflow: hidden;
}

#sidebar1 {
    float: left;
    position:absolute;
    width: 20%;
    height:100%;
    min-width:220px;
    background: none repeat scroll 0% 0% #007cb8;
    z-index:9999;
}