scrollbars are hidden and the page content is not completely shown - html

Question

Im facing two problems which are related with each other as i can assume. My webpage is not being fully displayed, a lot of content is hidden down and the scrollbar at the right side and the vertical one are not shown. I have tried to solve that with the overflow property in the body, the scrollbar was there but invisible so it didnt help me a lot. I want the content to be visible even though im zooming in(200% or whatever)
here is a snippet of my code
<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>
and the 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;
}
here is a live demo
https://jsfiddle.net/edwjvmsc/
thanks everyone!

Answer 1

Well, I'm not sure if this would be correct answer. but I removed the 'position:fixed' property from 'mainContentClient' class and the scrollbar is showing and you can scroll your content. Try it and let me know if it helped :).
.mainContentClient {
top: 0;
height: 100%;
width: 77%;
margin: 0 280px;
}