如果向下滚动 https://jsfiddle.net/rtvrueg9/你可以看到底部的一些内容没有显示。有什么建议吗？
<?php include 'head.php';?>
最佳答案
那是因为固定在你身上的位置，我添加了 overflow-x: hidden;而不是删除水平滚动条。
如果那个垂直的水平条打扰你删除 .content 中不必要的 overflow-y }
body {
width: 100%;
height: 100%;
padding: 0;
border: 0;
margin: 0;
overflow-x: hidden; /* EDIT */
}
h1 {
font-family: arial;
color: rgb(128, 128, 128);
text-align: center;
margin: 0;
}
header {
margin: 0;
padding: 0;
width: 100%;
height: 30%;
background: black;
background-image: url(profile_pic.jpg);
background-repeat: no-repeat;
background-position: right;
background-size: 20% 70%;
color: rgb(190, 190, 190);
text-align: center;
border-spacing: 5px 10px;
border: 1px solid black;
}
nav {
display: flex;
text-align: center;
height: 25px;
width: 100%;
background: rgb(80, 80, 80);
border: 1px solid rgb(80, 80, 80);
}
.nav_link {
flex-grow: 1;
line-height: 25px;
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
}
.content {
width: 100%;
height: 100%;
margin: 0;
overflow-y:scroll; }
.myPanel {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
box-shadow: 0px 0px 4px 999;
width: 60%;
margin: 1% auto;
}
.myPanel .heading {
background: rgb(80, 80, 80);
border-radius: 5px 5px 0px 0px;
color: white;
padding: 5px 20px;
}
.myPanel .panelTime {
padding: 3px 20px;
background: silver;
border-radius: 0px 0px 5px 5px;
}
.myPanel p {
margin: 3px 0px 0px 3px;
}
.myPanel:hover {
box-shadow: 0px 0px 8px black;
}
.myPanel.heading:hover {
background: white;
border-radius: 5px 5px 0px 0px;
color: black;
font-family: arial;
}
.myPanel.panelTime:hover {
background: rgb(80, 80, 80);
font-family: arial;
color: white;
}<?php include 'head.php';?>
<body>
<header>
<h1>Resume</h1>
</header>
<nav>
<div class="nav_link">
<a href="index.php"> Home </a>
</div>
<div class="nav_link">
<a href="resume.php"> Resume </a>
</div>
<div class="nav_link">
<a href="sideprojects.php"> Side Projects </a>
</div>
<div class="nav_link">
<a href="aboutme.php"> About Me </a>
</div>
</nav>
<div class="content">
<div class="myPanel">
<div class="heading">US ARMY NATIONAL GUARD</div>
<div class="panelTime">
<p>03/2014 -- Current</p>
<div class="panelBody">
<p>Crystal River, FL</p>
<ul>
<ui>Rank: PV2</ui></br>
<ui>Diesel Mechanic -- 91H</ui></br>
<ui>Military Police -- 31b<ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">LILLYS ON THE LAKE</div>
<div class="panelTime">
<p>06/2016 -- 02/2017</p>
<div class="panelBody">
<p>Clermont FL</p>
<ul>
<ui>Serving</ui></br>
<ui>Bartending</ui></br>
<ui>Service bar</ui></br>
<ui>Card Holder voids/comps</ui></br>
<ui>Open/close</ui></br>
<ui>Food running</ui></br>
<ui>Expediting</ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PANE D'OR</div>
<div class="panelTime">
<p>08/2015 -- 06/2016</p>
<div class="panelBody">
<p>Winter Garden FL</p>
<ul>
<ui>Baking</ui></br>
<ui>Pastry</ui></br>
<ui>Delivering</ui></br>
<ui>Sales at markets / shop</ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">Disney</div>
<div class="panelTime">
<p>06/2015 -- 11/2016</p>
<div class="panelBody">
<p>Orlando FL</p>
<ul>
<ui>Monorail pilot</ui></br>
<ui>Platform operator</ui></br>
<ui>Audience control</ui></br>
<ui>Customer relations</ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">PERFORMANCE YEARS GTO</div>
<div class="panelTime">
<p>01/2012 -- 02/2015</p>
<div class="panelBody">
<p>Hatfield PA</p>
<ul>
<ui>Shipping</ui></br>
<ui>Receiving</ui></br>
<ui>Pulling/packing/sorting</ui></br>
<ui>Picker operator</ui></br>
<ui>Forklift operator</ui></br>
<ui>Customer service</ui></br>
<ui>In house sales</ui></br>
<ui>Show sales</ui></br>
<ui>Inventory</ui></br>
</ul>
</div>
</div>
</div>
<div class="myPanel">
<div class="heading">GIANT FOODS</div>
<div class="panelTime">
<p>01/2012 -- 03/2013</p>
<div class="panelBody">
<p>Montgomeryville PA</p>
<ul>
<ui>Stocking shelves</ui></br>
<ui>Rotate merchandise</ui></br>
</ul>
</div>
</div>
</div>
</div>关于php - div 内容从网页底部剪裁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43036506/