html和正文的高度不是100％
[英]html and body's height is not 100%
问题描述
I've tried everything I know to make the height of the black part change according to the "samples" in the picture above. 
我已经尽一切努力使黑色部分的高度根据上图中的“样本”进行更改。 Whenever I add new "sample" that will go down the black part does not follow. 每当我添加新的“样本”时，黑色部分都不会出现。 Is there something wrong in my code, if there is please let understand how to fix it cause Im new at this. 我的代码中有什么问题吗，如果有，请让我们了解如何解决它，因为这是我的新问题。
Here is my code: 这是我的代码：
body, html, .yourteachers, .fullpage { margin: 0; padding: 0; width: 100%; height: 100%; } .fullpage { background-color: black; } .leftForm { background-color: #2c384a; width: 204px; height: 100%; float: left; font-family: calibri; color: white; text-align: center; } .yourteachers { text-align: center; } .announcementSlider { background-color: #323f4f; color: white; font-size: 24px; height: 280px; width: 200px; margin: 20px; display: inline-block; }
<html> <head> <link rel="stylesheet" type="text/css" href="css/teachers.css"> </head> <body> <header> <nav> <div class="nav-wrapper blue"> <div class="container"> <a href="#" class="brand-logo left">Teachers</a> <a href="#" class="sidenav-trigger" data-target="slide_out"><i class="material-icons">menu</i></a> <ul class="hide-on-med-and-down right"> <li><a id="dashb">Home</a></li> <li><a id="logout">Log Out</a></li> </ul> </div> </div> </nav> </header> <div class="fullpage"> <div class="leftForm hide-on-med-and-down"> <img src="pictures/default-avatar-250x250.png"> <p class="name"> <?php echo $name; ?> </p> <p class="section"> <?php echo $grade; ?>- <?php echo $section; ?> </p> </div> <div class="leftForm sidenav blue center" id="slide_out"> <img src="pictures/default-avatar-250x250.png"> <p class="name"> <?php echo $name; ?> </p> <p class="section"> <?php echo $grade; ?>- <?php echo $section; ?> </p> </div> <div class="yourteachers"> <?php while ($row = mysqli_fetch_array($query)) { echo '<a class="announcementSlider" href="teacherinfo.php?id=' . $row['IDNum'] . '"> <img src="pictures/blank photo.png" class="teacherpic"><br> <span>'.$row['LastName'].'</span><br> <span>'.$row['Grade'].' - </span> <span>'.$row['Section'].'</span> </a>'; } ?> </div> </div> <script type="text/javascript"> var a = document.getElementsByClassName("announcementSlider"); for (i = 0; i < a.length; i++) { a[i].onclick = function() { location.href = "teacherinfo.php"; }; } </script> <script src="js/teachers.js"></script> <script src="sameFunctions.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script type="text/javascript"> const slide_menu = document.querySelectorAll(".sidenav"); M.Sidenav.init(slide_menu, {}); </script> <footer> <div class="foot"> <div class="socialMed"> <a href="https://www.facebook.com/SchoolOfFelixians/" class="fa fa-facebook"></a> <a href="#" class="fa fa-twitter"></a> </div> </div> </footer> </body> </html>
3 个解决方案
解决方案1
0 2019-01-26 22:47:44
<!-- language-all: lang-css -->
body, html, .yourteachers, .fullpage {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background: black;
}
.fullpage {
overflow: hidden
}
.leftForm{
background-color: #2c384a;
width: 204px;
height: 100%;
float: left;
font-family: calibri;
color: white;
text-align: center;
}
.yourteachers{
text-align: center;
}
.announcementSlider{
background-color: #323f4f;
color: white;
font-size: 24px;
height: 280px;
width: 200px;
margin: 20px;
display: inline-block;
}
解决方案2
0 已采纳 2019-01-26 23:08:32
It's because your .fullpage needs to follow .yourteachers 's height. 这是因为您的.fullpage需要遵循.yourteachers的身高。 And your .leftForm has float: left but it's parent (.fullpage) still doesn't know the exact height of it's children. 而且您的.leftForm具有float: left但是它的父级（.fullpage）仍然不知道其子级的确切高度。 To fix it, you need to add clear: both by using div with additional .clearboth class or css :before or :after pseudo-selector. 要解决此问题，您需要添加clear：两者都使用div和其他.clearboth类或css：before或：after伪选择器。
In my approach above, I'm using fixed sidebar and add margin-left on .yourteachers to fix sidebar height issue. 在上面的方法中，我使用固定的侧边栏，并在.yourteachers上添加margin-left来修复侧边栏高度问题。 For better implementation, I recommend you to use flex box so you keep your sidebar not using fixed position. 为了更好地实现，我建议您使用弹性框，以使侧边栏不使用固定位置。
解决方案3
-1 2019-01-26 22:24:53
Have u tried height: 100vh ? 你试过height: 100vh吗？ Height is automatically adjusting, so just height: 100% means 100% height of parent. 高度会自动调整，因此仅height: 100%表示父项的高度为100％。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.