-1
私はまだこのレイアウトのものを使いこなそうとしていますが、私が理解したと思ったときに、このdivを表示することはできません。CSS Layout Mainbody not appearing
私は簡単なナビゲーションとフッタとメインとメインが表示されていません。黒い背景があると思われますが、現れていません。ここではフィドルは次のとおりです。
https://jsfiddle.net/44655gw4/2/
html {
height: 100%;
}
body{
height: 100%;
background-color: #527a7a;
margin: 0;
font-family: courier;
font-size: 19px;
}
* {
margin: 0;
}
#pagewrap {
min-height: 100%;
margin-bottom: -174px;
width: 80%;
}
#pagewrap:after {
content: "";
display: block;
}
#footer, #pagewrap:after {
height: 174px;
}
.sub:last-child {
border: 0px;
}
#footer {
background-color: #999999;
clear: both;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
}
.sub {
padding: 12px;
width: 32%;
height: 150px;
background: #999999;
color: white;
border-right: solid white 1px;
}
.sub:last-child {
border: 0px;
}
#nav {
list-style: none;
font-weight: bold;
width: 10%;
text-align: center;
background-color: #bfbfbf;
padding-right: 20px;
height: calc(100vh - 174px);
float: left;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
background-color: #bfbfbf;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
display: block;
text-decoration: none;
font-weight: bold;
color: pink;
background-color: #bfbfbf;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
#content {
width: 500px;
height: 100%;
float: right;
background-color: black;
}
<body>
<div id="pagewrap">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="content"></div>
</div>
<!--
<footer id="footer">
</footer>
-->
<hr>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
</body>
メインとはどういう意味ですか？あなたはメインコンテンツを意味しますか？ – dazunE
@dazunEはいサー。私は自分の投稿を編集しました。 IDの 'content'の黒の背景ボックスはそこにあるはずですが、それは何らかの理由ではありません。 –
あなたはどこにいるのですか？メインは何もしなかった。 – Shadow