Fatal编程技术网
  • html/
  • Html 使纹理100%宽度不工作，因为它溢出任何其他内容

Html 使纹理100%宽度不工作，因为它溢出任何其他内容

html css

Html 使纹理100%宽度不工作，因为它溢出任何其他内容,html,css,Html,Css,编辑：您可以在这里看到它：（出于某种原因，我无法重新创建该问题，但我希望是这样的：） 请参考此屏幕截图：请注意页脚处的广告 我真正想要的是首先是文本区域，然后是文本段落，然后是广告，最后是页脚。但是，我希望文本区域始终为页面宽度的90%。用户可以向下滚动查看其他内容 我的代码结构如下： <body> <nav>Nav bar stuff here</nav> <div class="page"> <div class="page-

编辑：您可以在这里看到它：（出于某种原因，我无法重新创建该问题，但我希望是这样的：）

请参考此屏幕截图：请注意页脚处的广告

我真正想要的是首先是文本区域，然后是文本段落，然后是广告，最后是页脚。但是，我希望文本区域始终为页面宽度的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>
我真正想要的东西的视觉表现：

请帮帮我，伙计们。过去两天我一直在玩这个问题，运气不好。我觉得我已经搜索了整个堆栈溢出，但找不到任何适合我的问题。非常感谢您的帮助

请注意，

您的div中有3项class=“panel panel default”，其中一项已设置为占用100%的空间，没有空间容纳其他2项。结果是重叠，因为它们都占用相同的空间

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

    </div>
    <div class="panel-body">
        size = 100%
    </div>
     <p> Ad and paragraph </p>
</div>
请用小提琴来重现这个问题。乍一看，你的代码似乎工作得很好。如果仍然存在任何问题，可能是您的CSS有问题。请发布相关的CSS。我已经更新了问题，先生我无法重现这个问题，但我已经添加了一个新的图片，我希望它看起来像什么。谢谢，先生。如果您无法复制，我们无法诊断您的问题。我只想说，检查你的广告div中没有任何浮动，因为它倾向于忽略间距。哦，天哪，你的div中有3个class=“panel panel default”项目，其中一个项目已设置为占据100%的空间，其他2个项目没有空间。这是关键。谢谢你，伙计！ 
<div class="panel panel-default">
    <div class="panel-heading">

    </div>
    <div class="panel-body">
        size = 100%
    </div>
     <p> Ad and paragraph </p>
</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%;
}