gpt4 book ai didi

html - 如何让页脚停留在内容的末尾(metro-ui)

转载 作者:行者123 更新时间:2023-11-27 23:56:36 25 4
gpt4 key购买 nike

我有这个代码:

<head>
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
</head>
<body style="height:100%">
<div class="grid fluid" style="background:yellow; padding:5px; display:inline-block; height:100%">
<div class="row" style="background:green; ">
<div class="span2" style="background:red; margin-right:10px; display:inline-block;">
<h1>Menu</h1>
<h1>Menu</h1>
<h1>Menu</h1>
</div>
<div class="span10" style="background:darkgreen; display:inline-block; height:100%">
<div id="Contenido" style="height:300px;">
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
</div>
</div>
</div>
<div class="row" style="background:grey; bottom:0px;">
esto es un pie de pagina esto es un pie de pagina esto es un pie de pagina
</div>
</div>
</body>

我希望页脚保留在内容的末尾,但内容大于其 div (ID="Contenido"),我无法移动此 div 或其高度,因为我有很多具有该高度的窗口,但我可以移动模板,所以我想要一个解决方案,使页脚停留在内容的末尾,而无需移动 ID="Contenido"的 div。

我试过在页脚上使用“bottom:0px”并在容器上使用“display:inline-block”,但那不起作用

最佳答案

在这里试试这个,将 div 移出并在其上设置绝对位置

<head>
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
</head>
<body style="height:100%">
<div class="grid fluid" style="background:yellow; padding:5px; display:inline-block; height:100%">
<div class="row" style="background:green; ">
<div class="span2" style="background:red; margin-right:10px; display:inline-block;">
<h1>Menu</h1>
<h1>Menu</h1>
<h1>Menu</h1>
</div>
<div class="span10" style="background:darkgreen; display:inline-block; height:100%">
<div id="Contenido" style="height:300px;">
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
<h1>Contenido</h1>
</div>
</div>
</div>
</div>
<div class="row" style="background:grey; bottom:0px; position:absolute; bottom:-300px; width:100%;">
esto es un pie de pagina esto es un pie de pagina esto es un pie de pagina
</div>
</body>

关于html - 如何让页脚停留在内容的末尾(metro-ui),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56226285/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com