Это, наверное, простой вопрос, но мне не повезло.
Я хочу иметь макет с заголовком, средней частью и нижним колонтитулом. В середине раздела я хочу, чтобы панель навигации фиксировалась с 250px и имела еще один div для хранения содержимого моей веб-страницы, но она растянулась на оставшийся размер браузера. Я знаю, что могу сделать это в javascript, но думаю, что это можно сделать в css.
вот краткая тестовая страница, если вы можете помочь.
<!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>
вот javascript, который я бы использовал, если css не может этого сделать..
var inside = document.getElementById('inside');
function resize(){
var width = window.innerWidth - 250;
inside.style.width = width + 'px';
}
window.addEventListener('resize', resize, false);
resize();
спасибо за любую помощь
В вашем коде было много ошибок макета, наиболее очевидным из которых является установка overflow:hidden;
на теге body, это может скрывать контент, который пользователи никогда не видят.
Я исправил большинство из них и сделал этот макет, который, кажется, тот, который вы ищете:
CSS:
body, html {
height: 100%;
margin:0;
padding:0;
}
h1 {
margin: 0;
}
header, footer {
width:100%;
height: 100px;
background: red;
}
#content {
position:absolute;
top:100px;
bottom:100px;
width:100%;
background: blue;
}
nav {
width: 20%;
max-width: 250px;
/*override*/
width: 250px;
height: 100%;
float: left;
background: green;
}
#inside {
height:100%;
overflow:auto;
}
footer {
position:absolute;
bottom:0;
}
http://jsfiddle.net/vikramjakkampudi/D2UM6/2/
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
div недоступным для пользователя ...
Вот ваш код с вашим требованием
<body>
<div id="Main_div">
<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>
</div>
</body>
и CSS для выше
body {
margin: 0;
padding: 0;
position:absolute;
width: 100%;
height: 100%;
}
#Main_div{
height:100%;
width:100%;
}
header, footer {
width: 100%;
height: 20%;
background: red;
}
#content {
width:100%;
height:100%;
background: silver;
}
nav {
width: 30%;
/*override*/
height: 100%;
float: left;
background: green;
}
#inside {
margin-left:32%;
width: 65%;
height: 100%;
overflow: auto;
}
см. рис.
Проверьте изображение верхнего и нижнего колонтитулов с содержимым
<body>
<div id="Main_div">
<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>
/***** css *****/
body {
margin: 0;
padding: 0;
position:absolute;
width: 100%;
height: 100%;
}
#Main_div{
height:100%;
width:100%;
}
header, footer {
width: 100%;
height: 20%;
background: red;
}
#content {
width:100%;
height:100%;
background: silver;
}
nav {
width: 30%;
/*override*/
height: 100%;
float: left;
background: green;
}
#inside {
margin-left:32%;
width: 65%;
height: 100%;
overflow: auto;
}