0
我已經得到了一個佈局，我一直在努力，無論我做什麼我都無法獲得HTML CSS來以我需要的方式作出反應。我畫了一個草圖使用截圖：佈局死角 - 表格單元格不斷溢出
我想表以適應瀏覽器的高度和以下表格細胞具有其內容通過滾動顯示，但我無法找到正確的方式使用Google之後做到這一點用了幾個小時。
@charset "utf-8";
/* CSS Document for computer browser */
html, body {
\t height: 100%;
\t width: 100%;
}
#wrapper {
\t background-color: #F4F7FA;
\t height: 100vh;
\t width: 100%;
\t min-width: 1024px;
\t 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 {
\t height: 100px;
\t background-color: #262A34;
\t margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
#wraplogo img {
\t max-width: 100%;
}
.leftnav-item {
\t width: 100%;
\t margin-top: 25px;
}
.leftnav-item p {
\t padding-left: 25px;
\t font-family: 'Dosis', sans-serif;
\t color: #7E87A3;
\t text-transform: uppercase;
\t font-weight:bold;
\t font-size:18px;
\t margin-bottom:15px;
}
.leftnav-item li {
\t width:100%;
\t height: 50px;
}
.leftnav-item li:hover {
\t background-color:#262A34;
}
.leftnav-bar {display: table; width:100%; height:100%}
.leftnav-item-cell-left {
\t display:table-cell;
\t height: auto;
\t width: 7px;
}
.leftnav-item-cell-middle {
\t display: table-cell;
\t width:50px;
\t text-align:right;
\t vertical-align:middle;
}
.leftnav-item-cell-right {
\t display: table-cell;
\t vertical-align:middle;
\t padding-left: 10px;
\t color:#fff;
\t font-family: 'Dosis', sans-serif;
\t text-transform: uppercase;
}
.leftnav-item-icon {
\t width:25px;
}
/* selected item appears different */
.leftnav-item-li-selected {
\t background-color:#262A34;
}
.leftnav-item-cell-left-selected {
\t display:table-cell;
\t height: auto;
\t width: 7px;
\t /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#53b621+0,34a26a+100 */
\t background: rgb(83,182,33); /* Old browsers */
\t background: -moz-linear-gradient(left, rgba(83,182,33,1) 0%, rgba(52,162,106,1) 100%); /* FF3.6-15 */
\t background: -webkit-linear-gradient(left, rgba(83,182,33,1) 0%,rgba(52,162,106,1) 100%); /* Chrome10-25,Safari5.1-6 */
\t background: linear-gradient(to right, rgba(83,182,33,1) 0%,rgba(52,162,106,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53b621', endColorstr='#34a26a',GradientType=1); /* IE6-9 */
}
/* ----------------------- Total part of right starts here ----------------------- */
#topbar {
\t height: 100px;
\t display: table-cell;
\t vertical-align:middle;
\t background-color:#fff;
}
#wrapmain {
\t display:table-cell;
\t 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">
\t <div id="wraplogo">
<img src="img/webportaallogo.png" alt="sitelogo">
</div>
<div>
\t <div class="leftnav-item">
\t <p>Title</p>
<ul>
\t <li>
\t <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>
\t <li class="leftnav-item-li-selected">
\t <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">
\t <div class="table" style="table-layout:fixed;">
\t <div class="tablerow">
\t <div id="topbar"></div>
</div>
<div class="tablerow">
\t <div id="wrapmain">
\t <div class="scrollbox">
\t \t PING
\t </div><!-- stop scroll box -->
</div>
</div>
</div>
</div><!-- wrapcell-right stop -->
</div><!-- stop wraprow -->
</div><!-- stop wraptable -->
</div><!-- stop wrapper -->
</body>
</html>