我对我一直在处理的布局有点卡住了，无论我做什么，我都无法让 html css 以我需要的方式使用react。我使用屏幕截图绘制了一个草图:
我希望表格适合浏览器高度，并希望下面的表格单元格通过滚动显示其内容，但我在谷歌搜索了几个小时后找不到正确的方法。
@charset "utf-8";
/* CSS Document for computer browser */
html, body {
height: 100%;
width: 100%;
}
#wrapper {
background-color: #F4F7FA;
height: 100vh;
width: 100%;
min-width: 1024px;
min-height: 768;
}
#wraptable{display: table; width:100%; height:100%;}
#wraprow{display: table-row;}
#wrapcell-left{display: table-cell; width:250px; background-color:#2F323E; overflow:hidden;}
#wrapcell-right{display: table-cell;vertical-align:top;}
.table{display:table; width:100%; height:100%}
.tablerow{display: table-row;}/* global, multiple uses, do not touch */
.tablecell{display:table-cell}
/* Total part of left starts here */
#wraplogo {
height: 100px;
background-color: #262A34;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
#wraplogo img {
max-width: 100%;
}
.leftnav-item {
width: 100%;
margin-top: 25px;
}
.leftnav-item p {
padding-left: 25px;
font-family: 'Dosis', sans-serif;
color: #7E87A3;
text-transform: uppercase;
font-weight:bold;
font-size:18px;
margin-bottom:15px;
}
.leftnav-item li {
width:100%;
height: 50px;
}
.leftnav-item li:hover {
background-color:#262A34;
}
.leftnav-bar {display: table; width:100%; height:100%}
.leftnav-item-cell-left {
display:table-cell;
height: auto;
width: 7px;
}
.leftnav-item-cell-middle {
display: table-cell;
width:50px;
text-align:right;
vertical-align:middle;
}
.leftnav-item-cell-right {
display: table-cell;
vertical-align:middle;
padding-left: 10px;
color:#fff;
font-family: 'Dosis', sans-serif;
text-transform: uppercase;
}
.leftnav-item-icon {
width:25px;
}
/* selected item appears different */
.leftnav-item-li-selected {
background-color:#262A34;
}
.leftnav-item-cell-left-selected {
display:table-cell;
height: auto;
width: 7px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#53b621+0,34a26a+100 */
background: rgb(83,182,33); /* Old browsers */
background: -moz-linear-gradient(left, rgba(83,182,33,1) 0%, rgba(52,162,106,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(83,182,33,1) 0%,rgba(52,162,106,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(83,182,33,1) 0%,rgba(52,162,106,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#53b621', endColorstr='#34a26a',GradientType=1 ); /* IE6-9 */
}
/* ----------------------- Total part of right starts here ----------------------- */
#topbar {
height: 100px;
display: table-cell;
vertical-align:middle;
background-color:#fff;
}
#wrapmain {
display:table-cell;
overflow:auto;
}
div.scrollbox {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webportaal</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="wraptable">
<div id="wraprow">
<div id="wrapcell-left">
<div id="wraplogo">
<img src="img/webportaallogo.png" alt="sitelogo">
</div>
<div>
<div class="leftnav-item">
<p>Title</p>
<ul>
<li>
<div class="leftnav-bar">
<div class="leftnav-item-cell-left"></div>
<div class="leftnav-item-cell-middle"><img src="img/icon-home.png" class="leftnav-item-icon" alt="home-icon" longdesc="img/icon-home.png"></div>
<div class="leftnav-item-cell-right">test</div>
</div>
</li>
<li class="leftnav-item-li-selected">
<div class="leftnav-bar">
<div class="leftnav-item-cell-left-selected"></div>
<div class="leftnav-item-cell-middle"><img src="img/icon-home.png" class="leftnav-item-icon" alt="home-icon" longdesc="img/icon-home.png"></div>
<div class="leftnav-item-cell-right">test</div>
</div>
</li>
</ul>
</div>
</div>
</div><!-- wrapcell-left stop -->
<div id="wrapcell-right">
<div class="table" style="table-layout:fixed;">
<div class="tablerow">
<div id="topbar"></div>
</div>
<div class="tablerow">
<div id="wrapmain">
<div class="scrollbox">
PING
</div><!-- stop scroll box -->
</div>
</div>
</div>
</div><!-- wrapcell-right stop -->
</div><!-- stop wraprow -->
</div><!-- stop wraptable -->
</div><!-- stop wrapper -->
</body>
</html>最佳答案
cells 元素可以设置为固定宽度*(table-layout)* 但会在需要时变高。
你可以看一下 flex 模型(它可以被混淆并且 justify-content + align-items 会让你处理就像是对齐内容的单元格，示例如下:
body {
margin:0;
height:100vh;
display:flex;
}
#left {
width:250px;
background:#333;
}
#left,#right {
display:flex;
flex-flow:column;
}
#right {flex:1;}
#logo, header {
height:100px;
display:flex;
align-items:center;
justify-content:center;
}
header {
background:gray;
}
nav, main {
flex:1;
overflow:auto;
}
nav a {
display:block;
border-left:20px solid transparent;
padding:0.5em;
color:white
}<div id="left">
<div id="logo">
<img src="http://dummyimage.com/200x80&text=LOGO-fixed"/>
</div>
<nav>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a><br/><br/><br/><br/><br/><br/><br/><br/><br/>demo
</nav>
</div>
<div id="right">
<header> header fixed</header>
<main> main to scroll if needed
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>demo</main>
</div>关于html - 布局死胡同——表格单元格不断溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41415365/