边框和溢出导致问题

时间：2016-12-12 09:06:12

标签： html css overflow viewport hidden

如果我可以要求你swing by Codepen:并且全屏查看（媒体查询没有完成），你会发现我在解决布局问题时没有使用overflow：hidden。

你会看到

a）Some行和图标会进入绿色部分 b）尽管有边框标记，蓝色部分仍然低于其他两个部分

如果我启用overflow：hidden全局隐藏，则布局显示我想要的方式。但是它有很多不必要的效果，阻碍了汉堡导航菜单的使用。

问题

A）尽管使用float和viewport设置为33.33vw，为什么这三个部分都没有对齐？我认为这是关键问题。

/* Globale styles */
/* En af vores store udfordringer er og har været, overflow:hidden; */
/* Den er afgørende for at få forsiden til at fungere godt */
/* Men den hæmmer samtidig en masse andre muligheder */

* {
    box-sizing:border-box;
    overflow:hidden;  /* If overflow is used, the layout works. If not, it completely disintegrates	 */
    margin:0;
    padding:0;
    border-width:0;
}

/* Menulinje i toppen, simpel text */

nav
{
	background-color:white;
	height:30px;
	Padding-left:30px;
	Padding-top:5px;
	font-weight:bold;
	font-family: 'Roboto', sans-serif;
	width:50vw;
	text-transform:uppercase;
	float:left;
}


/* Ikoner til sociale medier */

.somebar
{
	background-color:white;
	height:30px;
	Padding-right:30px;
	Padding-top:5px;
	font-weight:bold;
	font-family: 'Roboto', sans-serif;
	width:50vw;
	text-align:right;
	text-transform:uppercase;
}

/* Farver til sociale medier og ikoner */

a
{
	text-decoration:none;
	color:black;
}

a:hover
{
	color:red;
}

nav > a
{
	color:black;
	padding-right:7px;
}

nav > a:hover
{
	color:red;
}

/* Sidefoden, simpel text */


footer
{
	text-transform:uppercase;
	clear:both;
	background-color:white;
	height:30px;
	padding-top:5px;
	padding-right:30px;
	text-align:right;
	font-weight:bold;
	color:black;
	font-family: 'Roboto', sans-serif;
}


.img_list
{
	color:white;
	list-style-type:none;
}

/* Menu styling, der er lidt tricky for at tage hensyn til vores layout */
/* Den globale overflow:hidden forhindrer brugen er burgermenu */








/* iphone størrelse */

@media only screen and (max-device-height: 640px) {

	.colleft
	{
		background-image:url('images/wide_jump.jpg');
	    background-size:cover;
	    background-repeat:no-repeat;
	    background-position:center center;
		height:calc(33vh - 40px);
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 30px;
		line-height:calc(33vh - 80px);
		text-align:center;	
	}

	.colcenter
	{
		background-image:url('images/wide_kid.jpg');
	    background-size:cover;
	    background-repeat:no-repeat;
	    background-position:center center;
		height:calc(33vh - 40px);
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 30px;
		line-height:calc(33vh - 20px);
		text-align:center;			
	}

	.colright
	{
		background-image:url('images/wide_riders.jpg');
	    background-size:cover;
	    background-repeat:no-repeat;
	    background-position:center center;
		height:calc(33vh - 40px);
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 30px;
		line-height:calc(33vh - 20px);
		text-align:center;			
	}


	.colright > h1
	{
		vertical-align:middle;
		text-align:center;
	}

}

/* ipad størrelse */

@media only screen and (min-device-width: 640px) and (max-device-height: 1224px) {

	.colleft
	{
		background-image:url('images/wide_jump.jpg');
	    background-size:cover;
	    background-repeat:no-repeat;
	    background-position:center center;
		height:calc(33vh - 40px);
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 30px;
		line-height:calc(33vh - 20px);
		text-align:center;
	}

	.colcenter
	{
		background-image:url('images/wide_kid.jpg');
	    background-size:cover;
	    background-repeat:no-repeat;
	    background-position:center center;
		height:calc(33vh - 40px);
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 30px;
		line-height:calc(33vh - 20px);
		text-align:center;			
	}

	.colright
	{
		background-image:url('images/wide_riders.jpg');
	    background-size:cover;
	    background-repeat:no-repeat;
	    background-position:center center;
		height:calc(33vh - 40px);
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 30px;
		line-height:calc(33vh - 20px);
		text-align:center;			
	}

	.colcenter_content
	{
		background-color:lightgrey;
		min-height:height:calc(33vh - 40px);
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 30px;
		padding:20px;
	}	

	.colright_content
	{
		background-color:lightgrey;
		min-height:calc(100vh - 80px);		
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 30px;
		padding:20px;

	}	


	.art_center
	{
    	line-height: 1.2;
    	display: inline-block;
    	vertical-align: middle;
	}

}


/* Standard pc og skærmne */

@media only screen and (min-width : 1224px) {

	h1
	{
		font-size:30px;
		margin:0px;
		font-family: sans-serif;
		text-transform: uppercase;
		font-size:30px;
		color:white;	
	}

	.h1_back
	{
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px; /* future proofing */
		-khtml-border-radius: 50px;
		background-color:black;
		display:inline-block;
		width:70%;
		height:80px;
		opacity: 0.5;
	}

	.colleft
	{
		width:33.3333vw;
		background-image:url('images/high_jump.jpg');;
		float:left;
		height:calc(100vh - 80px);
		border-width:0px 0px 0px 30px;
		line-height:calc(100vh - 80px);
		text-align:center;
		background-color:red;
	}

	.colcenter
	{
		width:33.3333vw;
		background-image:url('images/high_kid.jpg');
		float:left;
		height:calc(100vh - 80px);		
		border-width:0px 0px 0px 0px;
		line-height:calc(100vh - 80px);
		text-align:center;
		background-color:green;	
	}

	.colright
	{
		width:33vw;
		background-image:url('images/high_riders.jpg');
		float:left;
		height:calc(100vh - 80px);		
		border-width:0px 30px 0px 0px;
		line-height:calc(100vh - 80px);
		text-align:center;
		background-color:blue;
	}


	.leftie		/* rette op på border, når kolonne style bruges på subpages */
	{
		border-width:0px 0px 0px 30px !important;
	}


	.colcenter_content
	{
		width:33.3333vw;
		background-color:lightgrey;
		float:left;
		height:calc(100vh - 80px);		
		border-color:white;
		border-style:solid;
		border-width:0px 0px 0px 0px;
		padding-left:40px;
		padding-right:40px;		
	}

	.colcenter_content h1
	{
		font-size:30px;
		color:black;
		margin-bottom:20px;
	}


	.colright_content
	{
		width:33.3333vw;
		background-color:lightgrey;
		float:left;
		height:calc(100vh - 80px);		
		border-color:white;
		border-style:solid;
		border-width:0px 30px 0px 0px;
		padding:20px;
	}	

	.video_style
	{
		height:calc((100vh - 260px)/3);
		margin-bottom:20px;
		width:100%;
		border-width:5px;
		border-style:line;
		border-color:white;
	}

	 .art_center
	{
    	line-height: 1.2;
    	display: inline-block;
    	vertical-align: middle	
    }

}
<!-- Sidehoved -->

	<header>
		<nav>
			<a href="#">Forside</a>
			<a href="#">Kontakt</a>
			<a href="#">Formalia</a>			
		</nav>
		<div class="somebar">
			<a href="https://www.facebook.com/K%C3%B8ge-BMX-Klub-226506560882006/?fref=ts">facebook&nbsp;<i class="fa fa-facebook-official" aria-hidden="true"></i>&nbsp;&nbsp;</a>
			<a href="http://www.youtube.com">&nbsp;&nbsp;youtube&nbsp;<i class="fa fa-youtube" aria-hidden="true"></i></a>
		</div>
	</header>

<!-- 

	I modsætning til de øvrige sider, har forsiden et unikt udseende, hvor billederne skal dominere.

	Venstre kolonne

-->

	<a href="kom_og_moed.htm" class="query_left">
		<section class="colleft">
			<div class="h1_back">
				<h1>Kom og mød os</h1>
			</div>
			<ul class="img_list">
				<li>Prøv BMX helt gratis!</li>
				<li>Snak med vores trænere</li>
				<li>Hvornår træner vi</li>								
			</ul>
		</section>
	</a>

<!---

	Center kolonne indhold

-->

2 个答案:

答案 0 :(得分：0)

尝试将以下CSS添加到您已有的

header {width: 100vw}
.somebar {
    float: right;
}   
header ~ a {
    float: left;
    width: 33.333%;
}

答案 1 :(得分：0)

我建议使用flexbox而不是float。通过媒体查询，您还可以节省大量时间和精力 将三个div包装在容器中并将其设置为

.container {display: flex;}

然后将三个孩子的宽度设置为33.33％，它们将彼此相邻排列并填满整个屏幕。随着屏幕的增大或缩小，它们也会自动调整。

CSS Tricks是flexbox的绝佳资源。

作为旁注，我建议尽可能将代码保持为DRY（不要重复自己）。如果您编写CSS以在特定大小的屏幕上工作，则只需使用@media来更改需要更改的内容。例如，您只需设置一次颜色，因为它们保持不变，无论屏幕大小如何。

相关问题
最新问题