0
Вот мой codepen. Here - это то, чего я хочу достичь.Как сделать центрированное растяжение div до 100% экрана?
Обратите внимание на то, что есть несколько элементов (меню навигации, изображение заголовка, зеленые div), которые центрированы на экране, а также растягиваются до 100% экрана, даже когда вы уменьшаете масштаб.
Как это достичь?
<body>
<div class="wrapper">
<header>
<h1>Welcome to my site.</h1>
</header>
<section id="main">
<h2>Lorem ipsum</h2>
<p class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="button"><a href="#">Learn More</a></p>
</section>
<aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
<article>
<div class="thumbnail"></div>
<div class="content">
<h2>This is just an article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="button"><a href="#">Details</a></p>
</div>
</article>
<article>
<div class="thumbnail"></div>
<div class="content">
<h2>This is just an article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="button"><a href="#">Details</a></p>
</div>
</article>
<article>
<div class="thumbnail"></div>
<div class="content">
<h2>This is just an article</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="button"><a href="#">Details</a></p>
</div>
</article>
<footer>
<p>Fancy footer</p>
</footer>
</div>
</body>
body {
background-color: #ededed;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.wrapper {
width: 960px;
margin: 0 auto;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
header {
float: left;
width: 100%;
margin: 0;
padding: 0;
background-color: #5C4868;
color: white;
}
header h1 {
margin: 5%;
padding: 0;
}
#main {
float: left;
width: 75%;
clear: left;
margin: 0;
padding: 40px 0 0 0;
}
.intro {
width: 600px;
}
.button {
border: 1px solid #c1c1c1;
border-radius: 2em;
text-align: center;
display: block;
float: left;
width: 8em;
}
.button a {
display: block;
padding: 5px 0;
text-decoration: none;
color: #000;
height: 2em;
line-height: 2em;
}
aside {
float: left;
width: 20%;
margin: 0;
padding: 40px 0 0 0;
}
article {
background-color: white;
float: left;
width: 100%;
clear: left;
margin: 20px 0px 0px 0;
}
.thumbnail {
float: left;
background-color: #5C4868;
width: 450px;
height: 400px;
}
.content {
float: left;
width: 470px;
margin: 40px 0px 0px 40px;
}
article p {
}
footer {
padding: 40px 0;
margin-top: 20px;
background-color: #141414;
float: left;
width: 100%;
clear: both;
}
footer p {
color: #4f4f4f;
text-align: center;
}
Вы удаляете 'ширина: 960px;' 'от .wrapper' или переместить этот элемент из' .wrapper' –
Ok, я могу понять, как я могу сделать это для мой заголовок и мой нижний колонтитул, я на самом деле это сделал. Но что, если у меня есть div внутри этой обертки? Если я удалю ширину: 960px; разве не все просто сломается? Должен ли я закончить оболочку, где я хочу, чтобы мой div запускался и запускал другую оболочку после этого div? – Razman
Просто установите ширину обертки: 100% –