содержание Make занимают всю страницу CSS + Bootstrap

Рассмотрим пример http://plnkr.co/edit/xnyrIy1LLZLIBAs6VIOr?p=preview содержание Make занимают всю страницу CSS + Bootstrap

Я просто пытаюсь сделать текстовое поле занимают всю высоту панели и панели занимают всю страницу страницы. Однако по какой-то причине он переполняется. Почему это?

<html> 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 


<style> 
    body, html{ 
    box-sizing: content-box; 
    background-color:#eeeeee; 
    height:100%; 
    overflow:hidden; 
    } 

    textarea{ 
    box-sizing: content-box; 
    resize: none; 
    height: 100% !important; 
    width:100%; 
    } 

    .form-control, .panel, .container { 
    box-sizing: content-box; 
    margin: 10px; 
     height: 100%; 
    } 

</style> 

<body> 

<div id="c2"> 
<div id="c1"> 

<div class="container"> 
<h1>Hello, hello!</h1> 
    <div class="panel"> 
    This is the panel<br><br> 
    <textarea class="form-control"> 
    </textarea> 
    </div> 
</div> 

</div> 
</div> 


</body> 
</html>

источник

2014-11-06 user1506145

Просто удалите поля и отступы в текстовое поле:

textarea { 
    padding: 0 !important; 
    margin: 0 !important; 
}

Удалите height: 100% из .form-control, .panel, .container. И текстовое поле больше не будет переполняться.

Но, если вы хотите сохранить некоторое дополнение, а затем изменить HTML:

<div class="panel"> 
    <div class="panel-heading">This is the panel</div> 
    <div class="panel-body"> 
     <textarea class="form-control"></textarea> 
    </div> 
</div>

источник

2014-11-06 17:52:31

Спасибо, что устраняет проблему текстовой. Но панель и textarea по-прежнему занимают более 100% страницы. (удалите переполнение: скрытый, и вы увидите) – user1506145

@ user1506145 взгляните на редактирование. –

Если я удаляю высоту 100%, панель и текстовое поле все еще переполняют размер страницы. Я хочу, чтобы панель и textarea занимали страницу с отключенной прокруткой. Посмотрите здесь http://plnkr.co/edit/xnyrIy1LLZLIBAs6VIOr?p=preview – user1506145

Используйте следующий код в стиле отдельного форм-контроле от панели и контейнера удалить размер 100% проблема

.form-control{ 
height: 110%; 
margin:10px; 
width: 90%;}

Проверьте это :: http://plnkr.co/edit/f7VLf67inHvhsoerx6t3?p=preview

EDIT: Я думал, вам нужен только полный размер текстовой области, пожалуйста, проверьте этот http://plnkr.co/edit/x8JlgDgFeuZpz27JWDx6?p=preview

источник

2014-11-06 18:03:48

Спасибо, но в вашем примере панель и textarea все еще переполняют размер страницы ... – user1506145

содержание Make занимают всю страницу CSS + Bootstrap

ответ

Смежные вопросы