我正面临两个彼此相关的问题。我的网页没有完全显示，很多内容被隐藏了，右侧的滚动条和垂直的滚动条没有显示。我试图通过主体中的overflow属性来解决该问题，但滚动条在那里但不可见，因此对我没有太大帮助。我希望内容即使放大也能看到（200％或其他值）
这是我的代码段
<nav class="sideBar">
<div class="sideBarHeader" id="wrapper">
<div class="dropdown">
</div>
<div class="ono">
<p style="font-size: 48px;">XXX</p>
</div>
</div>
<div style="padding-left: 2px;">
<div class="searchContainer">
</div>
</div>
</nav>
<div class="mainContentClient">
<div class="clientHeader">
</div>
<div class="clientContent"> <!-- the client content class is not defined yet -->
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;"></th>
</tr>
<tr style="background-color: #DEDEDE; height: 100px;">
<td style="border-bottom: 0;">STATS</td>
</tr>
</table>
<div style="height: 100%;" id="wrapper"> <!-- subcontent -->
<!-- left tables -->
<div class="leftClientContent">
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
<a href="vehicle/">
</a>
</th>
</tr>
<tr>
<td style="border-bottom: 0;"></td>
</tr>
</table>
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
<a href="cargounit/">
</a>
</th>
</tr>
<tr>
<td style="border-bottom: 0;"></td>
</tr>
</table>
</div>
<!-- right table + Map -->
<div class="rightClientContent">
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;" colspan="2">
info
</th>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
<tr>
<td style="border-bottom: 0; width: 10%;"></td>
<td style="border-bottom: 0; width: 90%;"><input type="text" placeholder="" name=""></td>
</tr>
</table>
<table class="onoTable paddedManagementTableContent thUpperCase">
<tr>
<th style="height: 40px;">
</th>
</tr>
<tr>
<td style="border-bottom: 0;"> <!-- map properties -->
<div id="Map" class="mapStyling"></div>
<script>
var lat = 47.35387;
var lon = 8.43609;
var zoom = 18;
var fromProjection = new OpenLayers.Projection("EPSG:4326");
var toProjection = new OpenLayers.Projection("EPSG:900913");
var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
map = new OpenLayers.Map("Map");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
map.setCenter(position, zoom);
</script>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
和css：
.sideBar {
height: 100%;
width: 17%;
position: fixed;
top: 0;
left: 0;
background-color: #C0C0C0;
max-width: 250px;
min-width: 250px;
overflow: auto;
}
.sideBarHeader {
padding: 4% 8%;
padding-left: 10%;
height: 85px;
}
.clientHeader {
font-size: 48px;
height: 130px;
}
.mainContentClient {
position: fixed;
top: 0;
height: 100%;
width: 77%;
margin: 0 280px;
}
.ono {
width: 180px;
text-align: right;
/* keep the ono aligned, use a negativ margin*/
margin-top: -28%;
}
.clientContent {
height: 100%;
width: 1130px;
max-width: 1500px;
min-width: 1000px;
}
.leftClientContent {
width: calc(100% - 850px);
margin-top: 2%;
}
.rightClientContent {
width: 850px;
margin-top: 2%;
margin-left: 10px;
}
.mapStyling {
width: 102.5%;
height: 300px;
margin-left: -20px;
}
/* default settings for the tables in part management*/
table.onoTable{
width: 100%;
border-collapse: collapse;
box-sizing: border-box;
table-layout: fixed;
}
table.onoTable th {
background-color: #FBD85C;
border-width: 0 10px;
border-color: #f1f1f1;
border-style: solid;
height: 62.5px;
font-size: 24px;
}
table.onoTable th:first-child {
border-left: 0;
}
table.onoTable th:last-child {
border-right: 0;
}
table.onoTable td {
border-width: 0 10px 4px 10px;
border-color: black #f1f1f1;
border-style: solid;
height: 50px;
font-size: 24px;
}
table.onoTable td:first-child {
border-left: 0;
}
table.onoTable td:last-child {
border-right: 0;
}
/**/
table.noBorder_1_2 td:nth-child(1) {
border-right: 0;
}
table.noBorder_1_2 td:nth-child(2) {
border-left: 0;
}
table.centerContent_24 th, table.centerContent_24 td {
text-align: center;
font-size: 24px;
}
tr.borderBottom_0 > td {
border-bottom: 0;
}
.backgroundColor_grey {
background-color: #DEDEDE;
}
/* shift the content of the main table of the management table a little bit to the right side*/
table.paddedManagementTableContent td {
text-align: left;
padding-left: 20px;
}
table.paddedManagementTableContent th {
text-align: left;
padding-left: 30px;
width:30%;
}
table.paddedManagementTableContent th:first-child {
text-align: left;
padding-left: 20px;
}
这是现场演示
https://jsfiddle.net/edwjvmsc/
谢谢大家！
答案 0 :(得分：0)
好吧，我不确定这是否是正确的答案。但我从“ mainContentClient”类中删除了“ position：fixed”属性，并且滚动条显示出来，您可以滚动内容。尝试一下，让我知道它是否有帮助：）。
use App\Http\Controllers\YourController;
Route::get('/url', [YourController::class, 'method']);
or
Route::get('/url','App\Http\Controllers\YourController@method');