gpt4 book ai didi

html - 让侧边栏占用内容空间

转载 作者:行者123 更新时间:2023-11-28 06:44:00 25 4
gpt4 key购买 nike

我正在尝试弄清楚如何最好地实现侧边栏,就像新的 google plus 中的侧边栏一样

我正在使用 MaterializeCSS

当侧边栏打开时,页面的“主要”内容的宽度会减小,而当侧边栏关闭时,它会变成整页宽度。

我正在尝试用 ui-router 来做这件事。

这是我当前的设置:

<header>
<div ui-view="header"></div>
</header>

<main ui-view="container"></main>

<footer>
<div ui-view="footer"></div>
</footer>

每个元素都有对应的 Controller 。我正在考虑为侧边栏创建一个新的 Controller 。

但我似乎无法按照我的意愿进行这项工作:这是我试过的:

<main>
<div class="navigation" ng-hide="shownav"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
<div class="content" ui-view="container"></div>
</main>

CSS:

main {
width: 100%
}
.navigation {
width: 20%;
float: left;
}
.content {
min-width: 80%;
float: left;
}

最佳答案

使用 float:rightfloat:left , 然后使用 position: absolute 定位页脚使用类似 bottom:0 的参数和 left:0定位在页面的底部和左侧,设置我想要的宽度。然后用 background-colors 标记 div和文本以准确查看我编码时发生的情况。

您所有的内容都包含在 <main> 中,因为它是左侧栏和内容所在的位置。

对不起,如果我不能解释得更好

main {
width: 100%;
position: relative;
height: 100%;
}
.navigation {
width: 20%;
float: left;
background: black;
color: white;
height: 100px;
}
.content {
width: 80%;
float: right;
background: red;
color: white;
height: 100px;
}
footer {
position: absolute;
background-color: green;
color: white;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
}
<header>
<div ui-view="header"></div>
</header>

<main ui-view="container">


<main>
<div class="navigation" ng-hide="shownav"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span>
</div>
<div class="content" ui-view="container">aaaaaa</div>
</main>


</main>

<footer>
<div ui-view="footer"></div>
</footer>

关于html - 让侧边栏占用内容空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34135108/

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