так что у меня есть панель навигации и нижний колонтитул, теперь, когда я добавляю строку с 3 столбцами и назначаю им высоту 100%, они занимают всю страницу и показывают полосу прокрутки. Теперь, чтобы быть более ясным, позвольте мне объяснить. например Это изображение здесь показывает, что строка показывает полосу прокрутки, пока она не достигнет вершины ...
, поскольку вы можете видеть изображение, которое я хочу, чтобы строка начиналась после моей панели навигации и заканчивалась до мой нижний колонтитул, что означает, что я хочу, чтобы середина панели навигации и области нижнего колонтитула была закрыта.
Мой индекс. php
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<!-- NAVBAR -->
<div class="w3-bar" id="onio_nav">
<a href="#" class="w3-bar-item w3-button">
<img src="images/logo.png" id="logo">
</a>
<a href="#" class="w3-bar-item w3-button w3-right">
<img src="images/user.jpg" id="onio_user">
</a>
</div>
<!-- NAVBAR END -->
<div class="container-fluid">
<div class="row" id="onio_row">
<div class="col-md-3">
wow
</div>
<div class="col-md-6">
wow
</div>
<div class="col-md-3">
wow
</div>
</div>
</div>
<!-- FOOTER -->
<div class="w3-bar" id="onio_footer">
<p>Footer</p>
</div>
<!-- FOOTER END-->
</body>
</html>
мой css:
body{
overflow:hidden;
}
#onio_nav {
background-color: #006080;
width: 100%;
height: 50px;
}
#logo {
height: 40px;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
padding-left: 10px;
padding-bottom: 5px;
}
#onio_user {
height: 40px;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
padding-left: 10px;
padding-bottom: 5px;
border-radius: 100%;
}
#onio_footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #006080;
color: white;
text-align: center;
}
#onio_row {
height: 100%;
}
#onio_row > div {
margin: 0;
padding: 0;
}
любая помощь?