如何使div扩展为在css中包装动态内容

-1

我有一个包装div，我想展开以包装动态生成的内容。生成的内容是一个表格，根据返回的结果数量增加。如何使div扩展为在css中包装动态内容

css for wrapper div 
#wrapperDiv { 
    position: absolute; 
    width: 100%; 
    height:1341px; 
    left: 0px; 
    border: 5px solid #408080; 
    overflow:hidden; 
} 

css for table inside the wrapper div 
#Table { 
    position: absolute; 
    width: 940px; 
    height: 319px; 
    left: 409px; 
    top: 215px; 
}

它并不显示所有的结果，当我改变溢出可见它显示了所有，但结果超出了包装的div，我仍然希望页脚的div总是在底部。

来源

2015-12-01 Emmanuel Omife

'高度：自动;'？ – cameronjonesweb

为了更好的理解，请提供**工作演示**（*代码片段，jsfiddle ... *） –

你有几个小问题在这里:)

第一：你有你的高度设置为一个固定值 “1341px”。因为你已经将它设置为这个值，你的div永远不会高于1341px。如果您希望div仅在内容大于1341px时才缩放，则可以使用min-height。

第二：您的＃表位于绝对位置。这意味着父母在渲染时将始终忽略#Table元素的大小。

我建议你快速浏览一下http://www.w3schools.com/css/css_positioning.asp，以获取更多关于这个toppic的信息。

尝试下面的CSS：

#wrapperDiv { 
position: absolute; 
width: 100%; 
height:1341px; 
left: 0px; 
border: 5px solid #408080; 
overflow:hidden;} 

#Table { 
position: relative; 
float: left; 
width: 940px; 
height: 319px; 
margin-left: 409px; 
margin-top: 215px;}

编码愉快:)

来源

2015-12-01 15:49:14 cpalinckx

感谢您的解决方案，它对我来说像魔术一样工作，我很感激。 –

很高兴听到:)你会介意验证我的评论作为答案吗？提前致谢！ – cpalinckx

正如有人在评论中说的那样，height: auto;应该可以正常工作。但是你的代码是一团糟。我认为你不明白css职位的工作原理。让我们创建一个容器（.Container）并填写父项（.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }）。只需为dymanic内容块添加{ position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; }即可。

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: #F72F4E; 
 
    overflow: hidden; 
 
} 
 

 
.Container { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    border: 5px solid #408080; 
 
    overflow: hidden; 
 
} 
 

 
.Content { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    max-height: 100%; 
 
    overflow: auto; 
 
    bottom: 0; //or top: 0; 
 
    background: rgba(0,0,0,.2); 
 
}

<main class="Container"> 
 
    <div class="Content">Dynamic Content</div> 
 
</main>

来源

2015-12-01 14:06:10 0x860111

如何使div扩展为在css中包装动态内容

回答

相关问题