使纹理不工作宽度溢出的任何其他内容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％

回答

相关问题