链接下方显示的内容
链接下方显示的内容
提问于 2019-09-30 18:29:11
嗨，我正在尝试创建一个博客网站，我有问题，我将页面部分分为3部分，我想1,3部分部分的高度应等于2部分(内容部分)的高度如何做，我尝试了很多次，但没有发生
附上输出截图后，我突出显示了我不想要文本的部分。
我知道通过bootstrap和js解决方案，但是我想要html/css。
function myfucn(){
var a = document.querySelector(".content");
var b = document.querySelector(".left");
a.innerHeight() = window.innerHeight();
}*{
padding:0px;
box-shadow: none;
margin: 0px;
}
.top{
width: cover;
height: 200px;
text-align: center;
}
.left{
text-align: center;
height: 100%;
float: left;
width: 200px;
background-color: green;
}
.right{
float: right;
width: 200px;
height: 500px;
}
.bottom{
position:fixed;
bottom: 0;
}
a{
text-decoration: none;
padding-right: 30px;
}
ul li{
list-style: none;
display: inline-block;
}
.name{
text-align: left;
padding-left: 30px;
top: -10px;
}
.name:hover{
color: red;
}
.namedes{
text-align: left;
padding-left: 35px;
}
.authorimg:hover{
transition: 2s;
transition-property: fade-in;
transform:rotate(10deg);
}
.googletranslate{
padding-top: 10px;
font-weight: 10;
}
.hackingsubmenu{
width: 100px;
height: 50px;
background-color: transparent;
font-size: 10px;
list-style: none;
text-align: left;
display: none;
}
/*.hacking:hover .hackingsubmenu{
display: block;
}*/<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="top"><!-- top -->
<ul> <!-- links -->
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#" class="hacking">HACKING</a>
<ul class="hackingsubmenu">
<li>web hacking</li>
<li>app hacking</li>
<li>android hacking</li>
</ul>
</li>
<li><a href="#">PROGRAMMING</a></li>
<li><a href="#">ANDROID</a></li>
<li><a href="#">WINTRICKS</a></li>
<li><a href="#">SHARE WITH US</a></li>
<li><a href="#">DOWNLOAD SOFTWARE</a></li>
</ul><!-- end of links -->
<div class="jumbotron"><!-- jumbotron -->
<h3 class="name">VAIBHAV'S BLOG</h3>
<p class="namedes">learn ethical hacking in a good way </p>
</div><!-- end of jumbotron -->
</div>
<div class="left"><!-- left -->
<h3>Author</h3>
<img class="authorimg" src="img/All-Time-Popular-Top-15-Hacking-Tool-For-Hackers-2015-Angry-IP-Scanner.png" alt="image" height="200px; width:cover" />
<h3>Categories</h3>
<ul style="list-style:none;">
<li>Android hacking</li><br/>
<li>Web hacking</li>
<li>Application hacking</li>
<li>Software hacking </li>
</ul>
</div><!-- end of left -->
<div class="right"><!-- right -->
<!-- google translate -->
<h4 class="googletranslate" style="text-align: center;" title="you are at right place you can now easily translate your webpage">GOOGLE TRANSLATE</h4>
<!-- google translate end -->
<!-- page counter -->
<h4 class="pagecounter" style="text-align: center;">PAGE COUNTER</h4>
<!-- end of page counter -->
</div>
<div class="bottom"><!-- bottom -->
<h6 class="fa fa-facebook">follow us on fb </h6>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-09-30 18:49:13
好吧，如果你不想使用lib的话。您可以将所有的left、center和right div封装到一个名为middle (您喜欢的任何名称)的div中，然后使用width: 100%设置middle div的样式。
您的内容应该在center目录中。您的center div应该具有样式float: left
<div class="middle" style="width: 100%;">
<!-- left -->
<div class="left" width="20%">
left
</div>
<!-- end of left -->
<!-- left -->
<div class="center" style="width: 60%; float: left">
the very long content here
</div>
<!-- right -->
<div class="right" style="width: 20%">
right
</div>
</div>Stack Overflow用户
发布于 2019-09-30 19:34:03
使用css grid。你甚至不需要接触你的html结构。
这就是它：
body {
padding: 0px;
margin: 0px;
height: 100vh;
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: auto auto 50px;
background: peru;
}
.top {
grid-column: 1;
grid-row: 1;
text-align: center;
background: #ccc;
}
.left {
grid-column: 1;
grid-row: 2;
text-align: center;
background-color: green;
}
.right {
grid-column: 2;
grid-row: 1 / span 2;
background: yellow;
overflow: auto;
}
.bottom {
background: pink;
grid-column: 1 / span 2;
grid-row: 3;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LAYOUT</title>
</head>
<body>
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
<div class="bottom">
BOTTOM
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58166003
复制相关文章
相似问题
腾讯云开发者
