html容器滚动错误

时间：2017-03-24 13:40:19

标签： php html css html5

我的html页面几乎可以正常工作，但我一直在滚动stackoverflow，似乎无法找到特定于我的任何答案。

body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
				border: 0; 
			}
			h1 {
				font-family: arial;
				color: rgb(128, 128, 128);
				text-align: center;	
				margin: 0;
				overflow: auto;	
			}
			header {
				margin: 0;
				width: 100%;
				top: 0; left: 0;
				padding: 0;
				height: 30%;
				position: fixed;
				line-height: 350%;
				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;
				position: fixed;
				top: 30%;
				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%;
				overflow-y: scroll;
				height: 100%;
				margin: 20% 0% 0% 0%;	
				padding-top: 6%;
			}
			.myPanel {
				border: 1px solid black;
				border-radius: 7px 7px 7px 7px;
				box-shadow: 0px 0px 4px 999;
				width: 45%;
				margin: 1%;
			}
			.myPanel .heading {
				background: rgb(80, 80, 80);
				border-radius: 5px 5px 0px 0px;
				color: white;
				padding: 5px 20px;
			}
			.myPanel .panelBody {
				padding: 3px 20px;
				background: silver;
				border-radius: 0px 0px 5px 5px;
			}
			.myPanel p {
				margin: 3px;
			}
			.myPanel:hover {
				box-shadow: 0px 0px 8px black;
			}
<?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="panelBody">
				<p>03/2014 -- Current</p>
					<div class="showOnHover">
						<p>
							<p>Crystal River, FL</p>
							<ul>
								<ui>Rank: PV2</ui></br>
								<ui>Diesel Mechanic -- 91H</ui></br>
								<ui>Military Police -- 31b</ui></br>
							</ul>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="myPanel">
			<div class="heading">LILLYS ON THE LAKE</div>
				<div class="panelBody">
					<p>06/2016 -- 02/2017</p>
					<div class="showOnHover">
						<p>
							<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>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="myPanel">
			<div class="heading">PANE D'OR</div>
				<div class="panelBody">
					<p>08/2015 -- 06/2016</p>
					<div class="showOnHover">
						<p>
							<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>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="myPanel">
			<div class="heading">Disney</div>
				<div class="panelBody">
					<p>06/2015 -- 11/2016</p>
					<div class="showOnHover">
						<p class>
							<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>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="myPanel">
			<div class="heading">PERFORMANCE YEARS GTO</div>
				<div class="panelBody">
					<p>01/2012 -- 02/2015</p>
					<div class="showOnHover">
						<p>
							<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>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="myPanel">
			<div class="heading">GIANT FOODS</div>
				<div class="panelBody">
					<p>01/2012 -- 03/2013</p>
					<div class="showOnHover">
						<p>
							<p>Montgomeryville PA</p>
							<ul>
								<ui>Stocking shelves</ui></br>
								<ui>Rotate merchandise</ui></br>
							</ul>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

所以随着小提琴稍微修改，以适用于该应用程序。唯一的区别是我使用一些PHP来形成我的计算机上的标题和导航栏的模板。

好吧，如果您查看小提琴，滚动条不仅是我想要滚动的区域，而是整个页面。我想保持标题固定并具有“正文”或我的页面容器滚动但页面一侧没有全长滚动条。

4 个答案:

答案 0 :(得分：0)

首先，你需要做你所说的他们应该做的事情！ ......

然后你必须将div内容的高度固定到屏幕上。换句话说，如果你想让你的身体没有滚动条，你必须将你的元素设置为固定在屏幕上并且你的身体没有垂直溢出。有点像这样：

header{height: 60px;}
nav{height: 40px;}
.content{height: calc(100vh - 100px);}

然后，您可以为div内容设置垂直滚动条。

#content{overflow-y: auto;}

查看页面的简化：

header {
	margin: 0;
	width: 100%;
	top: 0;
	left: 0;
	padding: 0;
	height: 60px;
	position: fixed;
	line-height: 350%;
	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;
}

.content {
	width: 100%;
	overflow-y: scroll;
	height: 100%;
	margin-top: 60px;
	height: calc(100vh - 70px);
}

.myPanel {
				border: 1px solid black;
				border-radius: 7px 7px 7px 7px;
				box-shadow: 0px 0px 4px 999;
				width: 45%;
				margin: 1%;
			}
			.myPanel .heading {
				background: rgb(80, 80, 80);
				border-radius: 5px 5px 0px 0px;
				color: white;
				padding: 5px 20px;
			}
			.myPanel .panelBody {
				padding: 3px 20px;
				background: silver;
				border-radius: 0px 0px 5px 5px;
			}
			.myPanel p {
				margin: 3px;
			}
			.myPanel:hover {
				box-shadow: 0px 0px 8px black;
			}
  <!--?php include 'head.php';?-->

	<header>
		<h1>Resume</h1>
	</header>
	
	<div class="content">
  <div class="myPanel">
			<div class="heading">LILLYS ON THE LAKE</div>
				<div class="panelBody">
					<p>06/2016 -- 02/2017</p>
					<div class="showOnHover">
						<p>
							</p><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>
						<p></p>
					</div>
				</div>
			</div><div class="myPanel">
			<div class="heading">LILLYS ON THE LAKE</div>
				<div class="panelBody">
					<p>06/2016 -- 02/2017</p>
					<div class="showOnHover">
						<p>
							</p><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>
						<p></p>
					</div>
				</div>
			</div><div class="myPanel">
			<div class="heading">LILLYS ON THE LAKE</div>
				<div class="panelBody">
					<p>06/2016 -- 02/2017</p>
					<div class="showOnHover">
						<p>
							</p><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>
						<p></p>
					</div>
				</div>
			</div><div class="myPanel">
			<div class="heading">LILLYS ON THE LAKE</div>
				<div class="panelBody">
					<p>06/2016 -- 02/2017</p>
					<div class="showOnHover">
						<p>
							</p><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>
						<p></p>
					</div>
				</div>
			</div><div class="myPanel">
			<div class="heading">LILLYS ON THE LAKE</div>
				<div class="panelBody">
					<p>06/2016 -- 02/2017</p>
					<div class="showOnHover">
						<p>
							</p><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>
						<p></p>
					</div>
				</div>
			</div>
		</div>

答案 1 :(得分：0)

只需从body类中删除height即可。 为内容类设置height:40%左右。

此外，在<div class="myPanel"> div中创建所有<div class="content"> 希望它有所帮助

答案 2 :(得分：0)

查看完整的工作代码：

<html>
<head>
<style>
body {
                width: 100%;
                padding: 0;
                margin: 0;
                border: 0; 
            }
            h1 {
                font-family: arial;
                color: rgb(128, 128, 128);
                text-align: center; 
                margin: 0;
                overflow: auto; 
            }
            header {
                margin: 0;
                width: 100%;
                top: 0; left: 0;
                padding: 0;
                height: 30%;
                position: fixed;
                line-height: 350%;
                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;
                position: fixed;
                top: 30%;
                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%;
                overflow-y: scroll;
                height: 40%;
                margin: 20% 0% 0% 0%;   
                padding-top: 6%;
            }
            .myPanel {
                border: 1px solid black;
                border-radius: 7px 7px 7px 7px;
                box-shadow: 0px 0px 4px 999;
                width: 45%;
                margin: 1%;
            }
            .myPanel .heading {
                background: rgb(80, 80, 80);
                border-radius: 5px 5px 0px 0px;
                color: white;
                padding: 5px 20px;
            }
            .myPanel .panelBody {
                padding: 3px 20px;
                background: silver;
                border-radius: 0px 0px 5px 5px;
            }
            .myPanel p {
                margin: 3px;
            }
            .myPanel:hover {
                box-shadow: 0px 0px 8px black;
            }

            </style></head>
<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="panelBody">
                <p>03/2014 -- Current</p>
                    <div class="showOnHover">
                        <p>
                            <p>Crystal River, FL</p>
                            <ul>
                                <ui>Rank: PV2</ui></br>
                                <ui>Diesel Mechanic -- 91H</ui></br>
                                <ui>Military Police -- 31b</ui></br>
                            </ul>
                        </p>
                    </div>
                </div>
            </div>

        <div class="myPanel">
            <div class="heading">LILLYS ON THE LAKE</div>
                <div class="panelBody">
                    <p>06/2016 -- 02/2017</p>
                    <div class="showOnHover">
                        <p>
                            <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>
                        </p>
                    </div>
                </div>
            </div>
        <div class="myPanel">
            <div class="heading">PANE D'OR</div>
                <div class="panelBody">
                    <p>08/2015 -- 06/2016</p>
                    <div class="showOnHover">
                        <p>
                            <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>
                        </p>
                    </div>
                </div>
            </div>
        <div class="myPanel">
            <div class="heading">Disney</div>
                <div class="panelBody">
                    <p>06/2015 -- 11/2016</p>
                    <div class="showOnHover">
                        <p class>
                            <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>
                        </p>
                    </div>
                </div>
            </div>
        <div class="myPanel">
            <div class="heading">PERFORMANCE YEARS GTO</div>
                <div class="panelBody">
                    <p>01/2012 -- 02/2015</p>
                    <div class="showOnHover">
                        <p>
                            <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>
                        </p>
                    </div>
                </div>
            </div>
        <div class="myPanel">
            <div class="heading">GIANT FOODS</div>
                <div class="panelBody">
                    <p>01/2012 -- 03/2013</p>
                    <div class="showOnHover">
                        <p>
                            <p>Montgomeryville PA</p>
                            <ul>
                                <ui>Stocking shelves</ui></br>
                                <ui>Rotate merchandise</ui></br>
                            </ul>
                        </p>
                    </div>
                </div>
            </div>
    </div>
</body>
</html>

答案 3 :(得分：0)

添加位置：固定;到body和overflow-y：滚动到.content

也不要＆＃34;关闭＆＃34; / BR 它只是br或br /以获得额外的兼容性。 

<br/>

你也不能嵌套p标签（在另一个p标签内有一个p标签）或在p标签内有一个列表 - 列表有自己的样式 - 所以摆脱列表+列表标题周围的p。并且你在每个myPanel的末尾都有一个额外的/ div - 应该只有三个。

此外，0值不应该在它们之后具有单位（例如％）。通过csslint.net运行您的CSS

你也有一些不必要的CSS属性 - 例如，你的标题和导航不需要顶部/右侧定位或位置：固定。

https://jsfiddle.net/Kass_P/kg6uppnm/25/ 

body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        border: 0; 
        position:fixed;
}
相关问题
最新问题