компоновка css. Растянуть div до оставшегося размера экрана после панели навигации абсолютного размера

0

Это, наверное, простой вопрос, но мне не повезло.

Я хочу иметь макет с заголовком, средней частью и нижним колонтитулом. В середине раздела я хочу, чтобы панель навигации фиксировалась с 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();

спасибо за любую помощь

Теги:
layout
relative
stretch

4 ответа

2
Лучший ответ

В вашем коде было много ошибок макета, наиболее очевидным из которых является установка overflow:hidden; на теге body, это может скрывать контент, который пользователи никогда не видят.

Я исправил большинство из них и сделал этот макет, который, кажется, тот, который вы ищете:

FIDDLE

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;
 }
  • 0
    это гораздо более элегантное решение, спасибо @ web-tiki
2

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;
}
  • 0
    спасибо, что сделал это
  • 0
    это делает переполненное содержимое .inside div недоступным для пользователя ...
1

Вот ваш код с вашим требованием

<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;
}

см. рис. Изображение 174551

Проверьте изображение верхнего и нижнего колонтитулов с содержимым

Изображение 174551Изображение 174551

  • 0
    Вывод не похож на картинку, которую вы добавили, смотрите здесь: jsfiddle.net/webtiki/LMpeU
  • 0
    Я просто увеличил масштаб и сделал снимок, потому что он не охватывает все, код с изображением, которым я поделился, одинаков
Показать ещё 3 комментария
0
    <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;
}
Сообщество Overcoder
Наверх
Меню