Question

如果向下滚动https://jsfiddle.net/rtvrueg9/，您会发现底部的部分内容未显示。有什么建议吗？

<?php include 'head.php';?>

Answer 1

使用：

<?php include_once("head.php"); ?>

确保head.php文件位于html文件的同一目录中，同样应将您的htlm文件从index.html重命名为index.php，并附带php扩展名

Answer 2

由于位置固定在你体内，我添加了溢出-x：隐藏;而不是去除水平滚动条。

如果那个垂直水平条困扰你，你会删除.content中的unnessary overflow-y }

＆＃13;

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;
					}

＆＃13;

<?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>

＆＃13;

div内容从网页底部剪裁

2 个答案: