Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/c/57.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 文本从div容器中取出_Html_Css - Fatal编程技术网

Html 文本从div容器中取出

Html 文本从div容器中取出,html,css,Html,Css,这就是我想要的- 1.div的最小高度应为100%,以便它可以全屏显示 2.它应该在水平中间 3.它应该是拉伸的,里面有内容。 现在的问题是,这三个东西都在工作,但在最后一个“你好”是走出容器。我用的是透明浮球。但它不起作用。 帮我解决一些css技巧。或者指出我做错了什么。 这里是JSIDLE链接- 这是我的html代码- <body> <table class="clearfix"> <tr height="15%"> <td id

这就是我想要的-
1.div的最小高度应为100%,以便它可以全屏显示
2.它应该在水平中间
3.它应该是拉伸的,里面有内容。

现在的问题是,这三个东西都在工作,但在最后一个“你好”是走出容器。我用的是透明浮球。但它不起作用。 帮我解决一些css技巧。或者指出我做错了什么。
这里是JSIDLE链接-

这是我的html代码-

<body>
  <table class="clearfix">
   <tr height="15%">
    <td id="image_td">
      <img src="img/smthing.png" alt="E-Learn" />
    </td>
  </tr>
  <tr height="85%">
    <td>
      <div id="td_content_div">                        
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p>
        <p>hello</p><p>hello</p><p>hello</p><p>hello</p>
      </div>
     </td>
  </tr>
 </table>
</body>

添加<代码>高度:自动
#td#u content_div

#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
height: 94%;
margin:3% 3% 1% 3%;
vertical-align: middle;
height:auto;
}

p { margin-left:20px; }

我不确定您到底想要什么,但如果您只是想让最后一个p留在容器中,我所做的就是将“td#u content_div”的高度更改为100%,这似乎有效。您可能可以完全删除该id上的高度声明,但它似乎不尊重段落的边距。根据具体情况,这可能是理想的效果。

您需要将高度:auto溢出:auto如下所示:

#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
 margin:3% 3% 1% 3%;
vertical-align: middle;

height: auto;
overflow:auto
}

若您只设置了height:auto,那个么圆角上会有一些难看的内容。干杯

像这样的东西你想要吗?是的,我想要里面的文字。但当我们在里面加上更多的“p”标签时,它就在外面了。这个呢?很好。但我不希望它太可滚动,我只希望它得到拉伸。这是当我使用自动时发生的事情。我想让那个容器达到全屏高度。这就是我使用auto时发生的情况。jsfiddle.net/Pzz22/4我希望该容器具有全屏高度。是的,但您将其设置为固定像素,我不希望这样,因为我正在使我的页面响应。谢谢你的帮助。这已经解决了。我把td U内容分区改为100%。现在它不能从容器中取出。你的解决方案成功了。我确实将高度设置为100%,这就是我想要的。现在工作正常了
#td_content_div {
position:relative;
border-radius:25px;
box-shadow: 0 0 3px rgba(83, 39, 134, 1);
width:94%;
 margin:3% 3% 1% 3%;
vertical-align: middle;

height: auto;
overflow:auto
}