使紋理不工作寬度溢出的任何其他內容100％

編輯：在這裏，你可以看到它：https://jsfiddle.net/407r6rc1/（我不能重現該問題由於某種原因，但我想是這樣的:)使紋理不工作寬度溢出的任何其他內容100％

請參考此截圖：注意廣告，因爲它會轉到頁腳。

我真正想要的是文本區域，然後再在一段文字，然後將廣告，然後在最後的註腳。但是，我希望textarea在任何時候都是頁面寬度的90％。用戶可以向下滾動查看其他任何內容。

我的代碼結構是這樣的：

<body> 
<nav>Nav bar stuff here</nav> 
<div class="page"> 
    <div class="page-content"> 
     <div class="page-main"> 
      <div class="panel"> 
       <form> 
        <textarea> Textarea here</textarea> 
       </form> 
       <p>Text here after the text area</p> 
       <div id="ad">Advertisement placed here</div> 
      </div> 
     </div> 
    </div> 
</div> 
</body>

我的CSS是如下：

body, .page, .page-content, .page-main, form { 
     height: 100%; 
    } 

    .panel { 
     height: 90%; 
    }

的我真正想要的可視化表示：

請幫我外面的人。過去兩天我一直在玩這個問題，沒有運氣。我覺得我已經搜索了整個堆棧溢出，但找不到適合我的問題。非常感謝幫助。

問候，

來源

2016-02-13 Taylor Swift

請在小提琴或其他軟件中重現問題。首先，您的代碼似乎完美地工作。如果仍然有任何問題，可能是您的CSS的問題。請張貼相關的CSS .. – Lal

我已更新問題先生。 https://jsfiddle.net/407r6rc1/ - 我無法重新創建問題，但我添加了一張新圖片，顯示我想要的樣子。謝謝你，先生。 –

如果您無法複製它，我們無法診斷您的問題。我只想說檢查一下你的ad div沒有任何浮動內容，因爲它往往忽略間距。 – Err

你必須帶class =「面板面板默認」，並已設置爲佔用空間的100％，這些項目中的一個的DIV中3項，不留空間給其他2項目。其結果是重疊的，因爲它們都佔用相同的空間

<div class="panel panel-default"> 
    <div class="panel-heading"> 

    </div> 
    <div class="panel-body"> 
     size = 100% 
    </div> 
    <p> Ad and paragraph </p> 
</div>

要麼你需要減少你的一些DIV類的大小來修正空間或可替換地分割你的面板的標題和廣告段落出自己的div結構。兩種方法都將正常工作，但需要改變你的身高值，無論佔填充和邊框停止重疊

分離方法

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#"> 
       Site name 
      </a> 
     </div> 
    </div> 
    <div class="panel-heading"> 
     <h1 class="panel-title"> 
      Textbox! 
     </h1> 

    </div> 
</nav> 

<div class="page"> 
    <div class="page-content"> 
     <div class="page-main"> 

      <div class="panel panel-default"> 

       <div class="panel-body"> 

        <form method="POST"> 
       <textarea class="form-control editor">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis deleniti dicta dolore eligendi explicabo ipsam non, sapiente vel voluptas voluptate? 

       </textarea> 
        </form> 

       </div> 
      </div> 


     </div> 
    </div> 


</div> 
<p><img src="http://www.embertech.co.uk/wp-content/uploads/2013/02/header-banner.png" alt="Ad and paragraph goes here"/> 
    <br> 
    <br> 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis deleniti dicta dolore eligendi explicabo ipsam non, sapiente vel voluptas voluptate? Asperiores atque dolore dolorum inventore laudantium nesciunt numquam, optio similique!</span><span>Aut consequuntur fuga libero mollitia qui quia quo veniam. Atque deleniti impedit molestiae numquam recusandae. Aperiam architecto dolor dolorem ea exercitationem, inventore laboriosam, nihil odit quod reprehenderit sunt veniam voluptas.</span> 
</p> 

<footer class="site-footer"> 
    <div class="site-footer-legal">© 2016 
     <a href="/">SITE NAME</a> 
     <span>Footer! Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    </span> 
    </div> 
</footer>

爲了彌補填充

.page-main{ 
    height: calc(100% - 60px); 
    width:100%; 
}

來源

2016-02-13 20:39:46 Sakaratte

噢，我的天啊_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _中有3件東西，class =「panel panel-default」，其中一件物品佔據了100％的空間，其餘2件物品沒有空間。鑰匙。謝謝哥們！ –

使紋理不工作寬度溢出的任何其他內容100％

回答

相關問題