0
Ceci est probablement une question facile, mais je n'ai pas de chance de le comprendre.Disposition css. Stretch div à la taille restante de l'écran après la barre de navigation de taille absolue
Ce que je veux, c'est avoir une mise en page avec un en-tête, une section médiane et un pied de page. Dans la section du milieu, je veux une barre de navigation fixe avec 250px et avoir une autre div pour contenir le contenu de ma page Web, mais l'avoir étirer à la taille restante du navigateur. Je sais que je pourrais le faire en javascript mais je pense qu'il devrait être possible de faire en CSS.
Voici une page de test rapide si vous pouvez aider.
<!doctype html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
header, footer {
width: 100%;
height: 100px;
float: left;
background: red;
}
#content {
width: 100%;
height: 80%;
float: left;
background: blue;
}
nav {
width: 20%;
max-width: 250px;
/*override*/
width: 250px;
height: 100%;
float: left;
background: green;
}
#inside {
width: 80%;
height: 100%;
float: left;
overflow: auto;
}
#inside div, #inside h1 {
width: 1000px;
margin: 40px auto;
}
</style>
</head>
<body>
<header><h1>test layout</h1></header>
<div id="content">
<nav>
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
</ul>
</nav>
<div id="inside">
<h1>I want this box to stretch to the remaining size</h1>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ad, ea, cupiditate odio molestiae molestias modi qui est architecto aliquid nostrum voluptatum exercitationem quos omnis ipsa repellat voluptas voluptates alias.</div>
<div>Error, repellat voluptatibus necessitatibus ad voluptate velit labore quod modi aliquid laborum? Sed, qui, tenetur facere maxime quis molestias accusantium deleniti natus nam odit et odio voluptatem eligendi expedita porro!</div>
<div>Non, ea, explicabo quasi unde sed quo rerum consequuntur reprehenderit placeat recusandae repudiandae nulla nemo adipisci? Unde, dolor explicabo dicta sint nostrum eligendi obcaecati minus pariatur vero alias magnam eum!</div>
<div>Quo, alias, placeat, mollitia quisquam impedit ea recusandae officia illum accusantium repudiandae eos nam cum aspernatur tenetur ab explicabo error deserunt officiis voluptas dicta eum praesentium fugiat quas molestiae sed.</div>
<div>Obcaecati, laudantium cumque dolor sapiente deleniti voluptatem tenetur voluptates iusto nostrum aliquid. Pariatur, at, nemo voluptate repudiandae sapiente quibusdam cum eligendi voluptatibus soluta eos perferendis explicabo magnam asperiores iure et!</div>
<div>Saepe, ut, ad, accusamus, voluptates ex omnis neque delectus aperiam quibusdam maiores beatae nemo blanditiis culpa quaerat corrupti nostrum voluptas ipsam. Ratione, accusantium, nostrum quis corporis recusandae error quos amet!</div>
<div>Voluptate, et, perspiciatis, voluptates harum vero impedit error libero atque saepe minus distinctio sint officiis laudantium eaque quae dolore incidunt minima enim excepturi aliquid. Provident omnis inventore voluptate explicabo necessitatibus.</div>
<div>Labore, error voluptatibus modi alias aspernatur quidem maiores cumque provident saepe esse! Aperiam, nesciunt, praesentium, ut, facilis explicabo dolore cumque totam quisquam architecto magni tenetur reiciendis hic blanditiis facere tempora.</div>
<div>Molestiae, cumque, eum, corporis, expedita quam hic eos repudiandae unde architecto consequatur ducimus odit. Itaque, iste, id, ut laudantium quo reprehenderit ab labore quod laborum consequatur non est. Dolor, culpa.</div>
<div>Delectus, totam, cum doloremque ad nostrum veniam aliquam non voluptatum eligendi similique saepe laborum sed nesciunt sint voluptate at placeat officia ducimus vel aliquid unde accusamus eius! Itaque, amet, repellat.</div>
<div>Autem, alias assumenda nihil dignissimos dicta magnam voluptates neque cum eveniet non. Voluptate, quasi, tempora soluta ipsam recusandae qui ab excepturi esse possimus totam corporis quae magnam cum fugit nihil.</div>
</div>
</div> <!-- END CONTENT -->
<footer>
stuff
</footer>
</body>
</html>
est le javascript ici j'utiliser si css ne peut le faire ..
var inside = document.getElementById('inside');
function resize(){
var width = window.innerWidth - 250;
inside.style.width = width + 'px';
}
window.addEventListener('resize', resize, false);
resize();
Merci pour toute aide
c'est une solution beaucoup plus élégante, merci @ web-tiki – synthet1c