gpt4 book ai didi

html - CSS Angular 的 ui-view 布局问题

转载 作者:行者123 更新时间:2023-11-28 05:48:42 25 4
gpt4 key购买 nike

我似乎无法弄清楚这一点。我有一个带有标题、侧边栏、子标题和内容的 Angular 应用程序。内容会自动增长,但是当侧边栏比内容长时,它不会扩展包装器容器。我尝试了 height auto/100% 的组合,我尝试同时使用 clear 但没有任何反应。

index.html

<body>
<!-- Main HTML gets injected here -->
<ui-view id="ng_view"></ui-view>
</body>

main.html

<div id="wrapper">
<tp-header></tp-header>
<tp-sidebar></tp-sidebar>
<tp-subheader></tp-subheader>
<!-- container with class="form" gets injected here -->
<ui-view id="ng_subview"></ui-view>
</div>

CSS

html {
height: 100vh;
}

body {
height: 100%;
}

#wrapper {
height: auto;
//min-height: 100%;
width: 1367px;
margin: auto;
position: relative;
//overflow: hidden;
}

#ng_view { height: 100%; }

#ng_subview { display: block; height: 100%; }

/* The style inside the sidebar */
.sidebar {
width: 343px;
float: left;
height: 100%;
position: absolute;
}

/* .form gets injected into ng_subview */
.form {
margin: 0px auto;
width: 1024px;
height: 100%;
display: block;
}

侧边栏在增长时不会将 ng-view 和/或包装器 div 向下推。我需要帮助。提前致谢!

最佳答案

想通了。

不下推内容的主要原因是侧边栏是绝对定位。绝对位置将元素从 HTML 流中移除,并且不会将内容下推。

此外,我还做了一些其他更改,但绝对定位是主要原因。

关于html - CSS Angular 的 ui-view 布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37461567/

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