链接下方显示的内容

Question

Hi i am trying to create a blog website and i have problem that i divided page section in 3 parts i want 1,3 part section height should be equal to 2part(content part) height how to do that i tried many times but not happening

attaching screenshot of output i highlighted the part where i don't want text.

i know solution by bootstrap and js but i want from 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>

screenshot of output

Answer 1

Alright, if you don't want to use any lib. You can wrap all your left , center , and right div into one div call middle (any name you like), then you style middle div with width: 100% .

Your content should be inside the center div. Your center div should have style 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>

Answer 2

Use css grid . You don't have to even touch your html structure.

Here it is:

 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>