Я пытаюсь повторить базовую c структуру страницы, основанную на теме https://themes.muffingroup.com/be/restaurant5/.
Я пытался использовать bootstrap строки и столбцы, которые кажутся чтобы создать свою собственную проблему, и при попытке сделать это с Bootstrap, используя пользовательский css, он не работает как тема.
В текущем случае основное содержание занимает 100%, а боковое меню составляет около 250 пикселей, так как боковая навигация имеет фиксированное положение. Основная область контента имеет 100% экрана, я хочу, чтобы основной контент занимал оставшееся пространство. Область контента - боковая навигация
Я могу использовать .side-content {width:calc(100% - 250px) !important}, но мне интересно, как они делая пример темы, как я не мог видеть, используя функцию cal c
https://codepen.io/KGuide/pen/oNXdgWz
body{font-family: 'Open Sans', sans-serif;}
.side-content{background-color:red; withd:100%; float:left;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
overflow:hidden;
background-color: #ccc;
}
.side-nav {
text-align:center;
background-color: #FCFCFC;
position: fixed;
width: 250px;
height: 100%;
top: 0;
right:0;
z-index: 9002;
-webkit-box-shadow: 2px 0 4px 2px rgba(0,0,0,.15);
box-shadow: 2px 0 4px 2px rgba(0,0,0,.15);
}
.img-logo {
margin-top:50px;
vertical-align: middle;
max-height: 100%;
width:100%;
max-width:150px;
}
.nav-menu{
list-style: none outside;
padding-top:30px;
margin-top:30px;
padding-left:0px;
}
.nav-menu > li {
margin: 0;
z-index: 203;
display: block;
float: left;
width: 100%;
float: none;
position: relative;
font-size:15px;
font-weight:600;
text-transform:uppercase;
padding:5px 15px;
}
.main-c{ background:yellow;}
.sone{position:relative;width:100%; height:100%; background:blue;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
<title>Page Title HERE!</title>
</head>
<body>
<nav class="side-nav">
<img class="img-logo" src="https://themes.muffingroup.com/be/restaurant5/wp-content/uploads/2019/12/restaurant5.png"/>
<ul class="nav-menu">
<li>Home</li>
<li>Abouts Us</li>
<li>Our Menu</li>
<li>Special Offers</li>
<li>Testimonials</li>
<li>Gallery</li>
</ul>
</nav>
<div class="side-content">
<div class="sone"> SECTION ONE
<p> this is intro area </p></div>
<div class="stwo">SECTION TWO - About us </div>
<div class="sthree">SECTION THREE - Our menu</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>