时间戳

首页 > 解决方案 > 链接下方显示的内容

html - 链接下方显示的内容

问题描述

嗨，我正在尝试创建一个博客网站，但我有问题，我将页面部分分为 3 个部分，我想要 1,3 部分部分高度应该等于 2part（内容部分）高度我尝试了很多次但没有发生怎么做

附上输出的屏幕截图，我突出显示了我不想要文本的部分。

我知道 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>

输出截图

标签： htmlcss

解决方案

好吧，如果你不想使用任何库。您可以将所有 , 和 div 包装left到center一个rightdiv 调用middle中（您喜欢的任何名称），然后middle使用width: 100%.

您的内容应该在centerdiv 内。你的centerdiv 应该有风格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>

推荐阅读