I would like to put a <div id="design"> (in red on the picture) with a height of 100%. But I didn't manage to. This is possible in CSS or it's better in jQuery ?
Can you help me please ?
https://jsfiddle.net/Xroad/qq5vfmxg/9/
#design {
width: 100%;
height: 100%; /* Don't work */
margin-top: 40px;
background: red;
border: 2px solid black;
}
height: 100%; works when an a height is set on the parent element. Since you have not shared your markup I cannot point out exactly what element might be the parent of #design. Either set a height on the parent element of #design, using whatever units you'd like, or use a unit other than a percentage value on #design.
Working Example:
.outer {
height: 250px;
}
.inner {
height: 50%;
}
<div class="outer">
<div class="inner">I will be 125px tall.</div>
</div>
NON Working Example:
.outer {
height: 250px;
}
.inner {
height: 50%;
}
<div class="outer">
<div class="middle">
<div class="inner">I will only be as tall as the space this text takes up.</div>
</div>
</div>
You need to add overflow : auto; in #design and overflow : hidden; in 'aside' class.
aside, main {
padding: 40px 0;
background-color: #7d7d7d;
border: 2px solid black;
overflow : hidden;
}
#design {
width: 100%;
height: 100%;
margin-top: 40px;
background: red;
border: 2px solid black;
overflow : auto;
}
Actually, setting an element in a column to have same height as some other column using CSS is pretty painful. You can use tables for that, but that's pretty 90's-ish.
If you can rely on that your users will use modern browsers (IE10+), I recommend you use CSS3 Flexbox - you'll achieve what you need quite easily. See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for tutorial and explanation of possible options.
See this altered fiddle (use Firefox or Chrome, I didn't use all necessary vendor prefixes): https://jsfiddle.net/1htd7pbt/1/
Basically, I just added this:
#content .row {
display: flex;
align-items: stretch;
}
#content aside {
width: auto;
display: flex;
flex-direction: column;
padding-bottom: 0;
}
#design {
flex-grow: 1;
}
A little bit of tweaking here. I removed the row class from your header and put the padding in your form and design separately. But it works. Here is the fiddle result (just removed the embedded/result to see the fiddle)
html,
body {
height: 100%;
}
.mw1140p {
max-width: 1140px;
margin: 0 auto;
}
.row {
clear: both;
}
.row {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
}
.row > *,
.col {
display: table-cell;
vertical-align: top;
}
aside .w25 {
width: 25%;
height: 100%;
}
.w75 {
width: 75%;
height: 98%;
overflow-y: hidden;
}
header {
height: 70px;
background-color: #7d7d7d;
border: 2px solid black;
}
#logo {
height: 40px;
}
main {
padding: 40px 0;
background-color: #7d7d7d;
border: 2px solid black;
}
label {
color: white;
}
input {
width: 98%;
margin: 10px 0;
}
aside form {
width: 100%;
height: 18%;
background-color: #7d7d7d;
border: 2px solid black;
padding: 40px 0;
overflow: hidden;
}
#design {
width: 100%;
height: 82%;
padding-top: 20px;
background: red;
border: 2px solid black;
overflow: hidden;
}
h3,
p {
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header class="mw1140p">
<img id="logo" src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
</header>
<section id="content">
<div class="mw1140p row">
<aside class="col w25">
<form action="" method="post">
<label for="keyword">Type your keywords</label>
<input type="text" name="keyword">
<button class="green">Ajouter</button>
</form>
<div id="design">
<p>Put 100% please !</p>
</div>
</aside>
<main class="col w75">
<ul id="content-list">
<li class="list-item row">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida at dolor sed semper. Aenean justo magna, ultrices non odio sit amet, feugiat commodo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Nulla congue libero id arcu bibendum, sed faucibus velit laoreet. Sed nec nunc at nibh ultricies sagittis. Suspendisse lorem massa, finibus et lacinia sit amet, blandit vel est. Ut non suscipit risus, sit amet dignissim erat. Aliquam
eget posuere nibh.</p>
</li>
<li class="list-item row">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida at dolor sed semper. Aenean justo magna, ultrices non odio sit amet, feugiat commodo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Nulla congue libero id arcu bibendum, sed faucibus velit laoreet. Sed nec nunc at nibh ultricies sagittis. Suspendisse lorem massa, finibus et lacinia sit amet, blandit vel est. Ut non suscipit risus, sit amet dignissim erat. Aliquam
eget posuere nibh.</p>
</li>
<li class="list-item row">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida at dolor sed semper. Aenean justo magna, ultrices non odio sit amet, feugiat commodo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Nulla congue libero id arcu bibendum, sed faucibus velit laoreet. Sed nec nunc at nibh ultricies sagittis. Suspendisse lorem massa, finibus et lacinia sit amet, blandit vel est. Ut non suscipit risus, sit amet dignissim erat. Aliquam
eget posuere nibh.</p>
</li>
<li class="list-item row">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida at dolor sed semper. Aenean justo magna, ultrices non odio sit amet, feugiat commodo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Nulla congue libero id arcu bibendum, sed faucibus velit laoreet. Sed nec nunc at nibh ultricies sagittis. Suspendisse lorem massa, finibus et lacinia sit amet, blandit vel est. Ut non suscipit risus, sit amet dignissim erat. Aliquam
eget posuere nibh.</p>
</li>
</ul>
</main>
</div>
</section>
You should use CSS for these purposes. Jquery is hard. Just use only vh instead of %.
#design {
width: 100%;
height: 100vh;
margin-top: 40px;
background: red;
border: 2px solid black;
}
You can find more explanation of vh in this link.
