如何让一个元素跨越整个div？

编辑：感谢你真棒的人网页终于看起来真棒！我不能选择最好的答案，因为所有的人都对我帮助很大：这里p 的结果，如果任何人的兴趣http://i.imgur.com/RABpT9u.png 如何让一个元素跨越整个div？

我试图做一个简单的网站与网站“标识”上顶，左侧的导航栏，中间的内容以及底部的一些页脚。

同时我试图使它响应，显然这是不是我的工作了：d

我是相当新的HTML和CSS，所以任何建议将有助于一吨！

* { box-sizing: border-box;} 
 

 
body { padding: 0; margin: 0; height:100%; } 
 

 
header { 
 
    height:100%; 
 
    border:0.5vw ridge #888; 
 
\t background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123); 
 

 
    text-align: center; 
 
\t font-size: 1.4vw; 
 
} 
 
header h1,h2 { 
 
\t color:#DD5; 
 
\t font-family: "Helvetica"; 
 
    margin: 0.5vw; 
 
\t padding-top: 0.5vw; 
 
\t line-height: 1.5vw; 
 
\t text-shadow: 0px 0px 0.5vw #000; 
 
} 
 

 
main { 
 
\t position: absolute; 
 
\t display: flex; 
 
\t width:100%; 
 
\t max-height:100%; 
 
\t 
 
\t background-color:#DDD; 
 
\t border: 2px solid #F0F; 
 
} 
 

 
nav { 
 
\t position: relative; 
 
\t display:block; 
 
\t overflow:auto; 
 
\t z-index: 0; 
 
\t float:left; 
 
\t height:100%; 
 
\t background: linear-gradient(90deg,#5BF,#29E); 
 
\t border:0.5vw ridge #888; 
 
    max-width:100%; /*width 100% just makes the navbar all long and ugly*/ 
 
} 
 
nav ul { margin:0; padding:0.5vw; list-style-type:none;} 
 
nav li { 
 
\t display:block; 
 
\t width:100%; 
 
\t padding: 1vw 0.5vw 1vw 0.5vw; 
 
\t margin: 0.5vw auto; 
 
\t text-align: center; 
 
\t 
 
\t border:0.2vw outset white; 
 
\t border-radius:0.5vw; 
 
\t background:linear-gradient(180deg,#AAA 60%,#777); 
 
} 
 
nav a { 
 
\t margin:0vw 1vw; 
 
    font-family: "Helvetica"; 
 
\t font-weight: bold; 
 
    font-size: 1.5vw; 
 
\t color: #DDD; 
 
    line-height: 0.5; 
 
\t text-decoration:none; 
 
\t text-shadow: 0px 0px 0.3vw #000; 
 
} 
 

 
#content { 
 
\t position: relative; 
 
\t display: inline; 
 
\t float:left; 
 
\t z-index: 0; 
 
\t max-width:100%; 
 
\t background-color:grey; 
 
\t border: 2px solid green; 
 
} 
 

 
footer { 
 
\t width:100%; 
 
\t margin-top:auto; 
 
\t border: 2px dashed red; 
 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
<title>titlee</title> 
 
<meta charset="UTF-8"/> 
 
<meta name="keywords" content="keyowrdsssss" /> 
 
<meta name="description" content="descriptionnn" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
<link rel="icon" href="icon.ico" /> 
 
<link rel="stylesheet" type="text/css" href="style.css" /> 
 
</head> 
 

 
<body> 
 

 
<header> 
 
<h1>Header title!</h1> 
 
<h2>Header description!</h2> 
 
</header> 
 

 
<main> 
 
<nav> 
 
<ul> 
 
    <li><a href="link">LinkToHome</a> 
 
    <li><a href="link">link1</a></li> 
 
    <li><a href="link">link2</a></li> 
 
    <li><a href="link">longlink3</a></li> 
 
    <li><a href="link">aboutlink</a></li> 
 
</ul> 
 
</nav> 
 

 
<center> 
 
<div id="content"> 
 
<h1>Content Content Content</h1></br> 
 
<h1>Content Content Content</h1></br> 
 
</div> 
 
</center> 
 

 
<footer> 
 
<h1>footer</h1> 
 
</footer> 
 

 
</main> 
 

 
</body> 
 

 
</html>

来源

2016-06-09 RandomStranger

']（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center）元素在此时被* long *取代;使用CSS来居中你的元素。 –

看到HTML 3.2中的'

'元素与HTML5元素结合在一起看起来很有趣。 –

我从字面上只有一天的经验与HTML，感谢您的建议：D – RandomStranger

您可以尝试使用;

width:100vw;

* { box-sizing: border-box;} 
 

 
body { padding: 0; margin: 0; height:100%; } 
 

 
header { 
 
    height:100%; 
 
    border:0.5vw ridge #888; 
 
\t background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123); 
 

 
    text-align: center; 
 
\t font-size: 1.4vw; 
 
} 
 
header h1,h2 { 
 
\t color:#DD5; 
 
\t font-family: "Helvetica"; 
 
    margin: 0.5vw; 
 
\t padding-top: 0.5vw; 
 
\t line-height: 1.5vw; 
 
\t text-shadow: 0px 0px 0.5vw #000; 
 
} 
 

 
main { 
 
\t position: absolute; 
 
\t display: flex; 
 
\t width:100%; 
 
\t max-height:100%; 
 
\t 
 
\t background-color:#DDD; 
 
\t border: 2px solid #F0F; 
 
} 
 

 
nav { 
 
\t position: relative; 
 
\t display:block; 
 
\t overflow:auto; 
 
\t z-index: 0; 
 
\t float:left; 
 
\t height:100%; 
 
\t background: linear-gradient(90deg,#5BF,#29E); 
 
\t border:0.5vw ridge #888; 
 
    max-width:100%; /*width 100% just makes the navbar all long and ugly*/ 
 
} 
 
nav ul { margin:0; padding:0.5vw; list-style-type:none;} 
 
nav li { 
 
\t display:block; 
 
\t width:100%; 
 
\t padding: 1vw 0.5vw 1vw 0.5vw; 
 
\t margin: 0.5vw auto; 
 
\t text-align: center; 
 
\t 
 
\t border:0.2vw outset white; 
 
\t border-radius:0.5vw; 
 
\t background:linear-gradient(180deg,#AAA 60%,#777); 
 
} 
 
nav a { 
 
\t margin:0vw 1vw; 
 
    font-family: "Helvetica"; 
 
\t font-weight: bold; 
 
    font-size: 1.5vw; 
 
\t color: #DDD; 
 
    line-height: 0.5; 
 
\t text-decoration:none; 
 
\t text-shadow: 0px 0px 0.3vw #000; 
 
} 
 

 
#content { 
 
\t position: relative; 
 
\t display: inline; 
 
\t float:left; 
 
\t z-index: 0; 
 
\t background-color:grey; 
 
\t border: 2px solid green; 
 
    width:86vw; 
 
} 
 

 
footer { 
 
    position: absolute; 
 
\t width:100%; 
 
\t border: 2px dashed red; 
 
    bottom:0; 
 
}

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
<title>titlee</title> 
 
<meta charset="UTF-8"/> 
 
<meta name="keywords" content="keyowrdsssss" /> 
 
<meta name="description" content="descriptionnn" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
<link rel="icon" href="icon.ico" /> 
 
<link rel="stylesheet" type="text/css" href="style.css" /> 
 
</head> 
 

 
<body> 
 

 
<header> 
 
<h1>Header title!</h1> 
 
<h2>Header description!</h2> 
 
</header> 
 

 
<main> 
 
<nav> 
 
<ul> 
 
    <li><a href="link">LinkToHome</a> 
 
    <li><a href="link">link1</a></li> 
 
    <li><a href="link">link2</a></li> 
 
    <li><a href="link">longlink3</a></li> 
 
    <li><a href="link">aboutlink</a></li> 
 
</ul> 
 
</nav> 
 

 
<center> 
 
<div id="content"> 
 
<h1>Content Content Content</h1></br> 
 
<h1>Content Content Content</h1></br> 
 
</div> 
 
</center> 
 
</main> 
 
<footer> 
 
<h1>footer</h1> 
 
</footer> 
 

 

 

 
</body> 
 

 
</html>

来源

2016-06-09 17:29:17 since095

内容div只是压碎其他的：p – RandomStranger

如果您将其更改为80，它应该具有预期的效果。 vw是视口宽度的缩写，因此顾名思义将其设置为100将占用页面的100％，80至80％等。我已经为您编辑了帖子。 – since095

我已经尝试了各种vw大小，并且80vw的结果是这样的：http://i.imgur.com/jEZc9OB.jpg我很确定问题是我定位或显示了divs不正确，我只是没有想法如何解决这个问题。 – RandomStranger

我不知道如果这正是你要找的东西，但你尝试过使用柔性的财产？

尝试看看这里，看看这是你在找什么https://jsfiddle.net/jg2sjrL5/4/

<div id="container"> 
    <div id="navigation">navigation</div> 
    <div id="content"></p>content</p></p>content</p></p>content</p> 
    </p>content</p></div> 
    </div> 
    <div id="footer">footer</div> 


html, body {width: 100vw, height: 100vh} 
#container { 
    display:flex; 
    align-items: center; 
    flex-direction:row;} 
#main, #footer { 
    width: 100vw; 
    } 
#main{ 
    display: flex; 
    flex-direction: row; 
} 
#content { 
    background-color:red; 
    width: 80vw; 
} 
#navigation { 
    background-color:white; 
    width: 20vw; 
    } 
#footer { 
    background-color:green; 
}

你最终可以设置与VH的不同元素的高度，以使它们适合你的页面

来源

2016-06-09 17:49:12

我编辑了代码并添加了jsfiddle –

哇永远不会知道flex究竟是什么，但这正是我想要实现的，谢谢！ – RandomStranger

这里有一些指导。希望能帮助到你。

html { 
 
    box-sizing: border-box;   /* 1 */ 
 
    height: 100%;     /* 2 */ 
 
} 
 

 
*, *:before, *:after { 
 
    box-sizing: inherit;    /* 1 */ 
 
} 
 

 
body { 
 
    margin: 0;      /* 3 */ 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
header { 
 
    border: 0.5vw ridge #888; 
 
    background: linear-gradient(to right, #123, #368, #48A, #59B, #48A, #368, #123); 
 
    text-align: center; 
 
    font-size: 1.4vw; 
 
} 
 

 
header h1, h2 { 
 
    color: #DD5; 
 
    font-family: "Helvetica"; 
 
    margin: 0.5vw; 
 
    padding-top: 0.5vw; 
 
    line-height: 1.5vw; 
 
    text-shadow: 0px 0px 0.5vw #000; 
 
} 
 

 
main {        /* 4 */ 
 
    flex: 1;       /* consume remaining space in column */ 
 
    display: flex; 
 
    background-color: #DDD; 
 
    border: 2px solid #F0F; 
 
} 
 

 
nav { 
 
    background: linear-gradient(90deg, #5BF, #29E); 
 
    border: 0.5vw ridge #888; 
 
} 
 

 
nav ul { 
 
    margin: 0; 
 
    padding: 0.5vw; 
 
    list-style-type: none; 
 
} 
 

 
nav li { 
 
    padding: 1vw 0.5vw 1vw 0.5vw; 
 
    margin: 0.5vw auto; 
 
    text-align: center; 
 
    border: 0.2vw outset white; 
 
    border-radius: 0.5vw; 
 
    background: linear-gradient(180deg, #AAA 60%, #777); 
 
} 
 

 
nav a { 
 
    margin: 0vw 1vw; 
 
    font-family: "Helvetica"; 
 
    font-weight: bold; 
 
    font-size: 1.5vw; 
 
    color: #DDD; 
 
    line-height: 0.5; 
 
    text-decoration: none; 
 
    text-shadow: 0px 0px 0.3vw #000; 
 
} 
 

 
#content { 
 
    flex: 1;      /* consume remaining space in row */ 
 
    background-color: grey; 
 
    border: 2px solid green; 
 
} 
 

 
footer { 
 
    border: 2px dashed red; 
 
}

<header> 
 
    <h1>Header title!</h1> 
 
    <h2>Header description!</h2> 
 
</header> 
 

 
<main> 
 
    <nav> 
 
     <ul> 
 
      <li><a href="link">LinkToHome</a></li> 
 
      <li><a href="link">link1</a></li> 
 
      <li><a href="link">link2</a></li> 
 
      <li><a href="link">longlink3</a></li> 
 
      <li><a href="link">aboutlink</a></li> 
 
     </ul> 
 
    </nav> 
 
    <div id="content"> 
 
     <h1>Content Content Content</h1> 
 
     <h1>Content Content Content</h1> 
 
    </div> 
 
</main> 
 

 
<footer> 
 
    <h1>footer</h1> 
 
</footer>

请注意，在您的原始代码中，您使用了CSS定位和浮动以及HTML <center>元素。您不需要position: absolute，position: relative或float: left，以便在有Flexbox时使此布局工作。和the <center> element is being phased out。你不应该使用它，你不需要它。

来源

2016-06-09 17:56:27

从来不知道盒子尺寸是什么，我只是把它扔到我的代码中：D虽然Flex的效果很好！ – RandomStranger

如何让一个元素跨越整个div？

回答

相关问题