使內容佔據整個頁面的CSS +引導

考慮這個例子http://plnkr.co/edit/xnyrIy1LLZLIBAs6VIOr?p=preview 使內容佔據整個頁面的CSS +引導

我只是試圖讓textarea的佔用面板的整體高度，面板佔據了首頁的整個頁面。但是，由於某種原因它溢出了。這是爲什麼？

<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的margin和padding：

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

取下.form-control, .panel, .container的height: 100%。 textarea不會再溢出。

但是，如果你想保留一些填充，然後換你的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的問題。但面板和textarea仍然佔據了頁面的100％以上。（刪除溢出：隱藏，你會看到） – user1506145 2014-11-06 17:54:45

@ user1506145看看編輯。 – 2014-11-06 18:13:32

如果我刪除高度100％的面板和textarea仍然溢出頁面大小。我希望面板和textarea在滾動禁用時佔據頁面。看看這裏http://plnkr.co/edit/xnyrIy1LLZLIBAs6VIOr?p=preview – user1506145 2014-11-06 18:20:36

使用下面的代碼刪除100％大小問題

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

檢查了這一點:: http://plnkr.co/edit/f7VLf67inHvhsoerx6t3?p=preview

編輯：我還以爲你只需要文本區的全尺寸請查看本 http://plnkr.co/edit/x8JlgDgFeuZpz27JWDx6?p=preview

來源

2014-11-06 18:03:48

謝謝，但在你的例子面板和textarea仍然溢出頁面大小... – user1506145 2014-11-06 18:21:29

使內容佔據整個頁面的CSS +引導

回答

相關問題