layout 相关问题

我正在尝试使用 Flexbox 创建一个布局，其中包含以下元素：我正在尝试使用 Flexbox 创建一个布局，其中包含以下元素： <application> <flex-container> <page-content> <template-content> </template-content> </page-content> </flex-container> </application> 基本上，这是我想要的结构。为了在我的 app.component.ts 中重现这一点，我创建了这个布局： <div class="application-body"> <header></header> <div class="flex-container"> <img class="background" src="assets/background.png" /> <ion-app> <ion-router-outlet (ionNavWillChange)="playFadeInOutAnimation($event.target)" ></ion-router-outlet> </ion-app> <ng-toast></ng-toast> </div> <footer></footer> </div> app.component.css： .background { margin: 0; padding: 0; overflow: hidden; background-size: cover; background-position: center; background-size: 0%; position: fixed; width: 100%; height: 100%; z-index: -1; } .application-body { margin: 0; padding: 0; height: 100%; } header { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: 64px; background: linear-gradient(to right, #e03434, #dc6869); color: #fff; padding: 20px; width: 100%; } footer { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: 64px; background: linear-gradient(to right, #e03434, #dc6869); color: #fff; padding: 20px; width: 100%; } ion-title { color: var(--ion-color-text); font-size: 1.5rem; font-weight: bold; } @media only screen and (min-width: 768px) { ion-title { font-size: 2rem; } } 登录页面.component.html： <div class="page-content"> <imcl-scheduling-login-template (clickLogin)="autenticationProcess($event)" (clickSignup)="navigateToSignupPage($event)" ></imcl-scheduling-login-template> </div> 登录模板.component.html： <div class="template-container"> <div class="left-content"> <ion-img class="logo" src="assets/imcl-logo.svg"></ion-img> </div> <div class="right-content"> <div class="title-container"> <ion-text color="primary"> <h2 class="title">Acesse agora!</h2> </ion-text> </div> <form [formGroup]="form" (keyup.enter)="submit()"> <ion-item> <ion-input formControlName="username" label="Email" labelPlacement="floating" type="text" placeholder="[email protected]" > </ion-input> </ion-item> <ion-item> <ion-input formControlName="password" label="Senha" labelPlacement="floating" type="{{ showPassword ? 'text' : 'password' }}" placeholder="*******" > </ion-input> <ion-icon name="{{ showPassword ? 'eye-off' : 'eye' }}" slot="end" (click)="togglePassword()" > </ion-icon> </ion-item> <br /> <br /> <div class="button-container"> <ion-button color="primary" (click)="loginHandler()" >Acessar agora</ion-button > <ion-button color="secondary" (click)="signupHandler()" >Criar conta</ion-button > </div> </form> </div> </div> 最后是全局样式（styles.css）： .flex-container { display: flex; flex-direction: column; min-height: calc(100vh - 64px); background-color: white; border: solid 8px blue; align-items: center; } .page-content { flex: 1; overflow-y: auto; border: solid 4px purple; } .page-content.no-overflow { overflow-y: hidden; } .template-container { display: flex; flex-direction: row; max-height: 100%; /* Define a largura máxima do template */ min-height: calc(100% + 64px); /* Define a largura máxima do template */ justify-content: center; /* Centraliza o conteúdo horizontalmente */ align-items: center; /* Centraliza o conteúdo verticalmente */ } .left-content, .right-content { display: flex; max-height: 100%; border: solid 4px red; flex-direction: column; width: 50%; } .title { font-size: 32px; } .title-container { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .page-content { align-items: center; } .template-container { flex-direction: column; padding: 32px; margin: 0; } .left-content, .right-content { width: 100%; } } .left-content, .right-content { display: flex; max-height: 100%; border: solid 4px red; flex-direction: column; width: 50%; } .left-content { align-items: flex-end; } .right-content { align-items: flex-start; } .button-container { display: flex; justify-content: center; } .bottom-button { position: absolute; bottom: 0; width: 100%; padding: 16px 0; } 问题是页面内容的增长速度超过了弹性容器的增长速度，导致了一些可视化问题。页面内容从标题后面开始。任何人都可以帮忙吗？我对 css 真的很不好。 .flex-container { display: flex; flex-direction: column; min-height: calc(100vh - 64px); /* Maintain minimum height for viewport coverage */ background-color: white; /* Remove unnecessary min-height from template-container */ align-items: center; } .page-content { flex: 1; /* Optional: Set overflow-y for scrolling */ overflow-y: auto; /* Or keep overflow-y: hidden; to hide content exceeding container */ /* Adjust padding/margin as needed */ } .template-container { display: flex; flex-direction: row; /* Removed min-height: calc(100% + 64px); */ justify-content: center; align-items: center; } .left-content, .right-content { display: flex; max-height: 100%; border: solid 4px red; /* For debugging purposes */ flex-direction: column; width: 50%; } /* Other styles remain unchanged... */

html css angular layout flexbox

回答 1 投票 0

Vuetify 项目列表中的自适应网格布局

我遇到了一个似乎很常见的问题，但我可以克服它。我有一个 API 查询，它返回一个对象列表。我想将我的页面显示为填充内容的卡片网格。我...

vue.js gridview layout vuetify.js

回答 2 投票 0

在 dotNET MAUI 的一页上使用多个集合视图处理滚动和高度

我有一个水平方向和一个垂直方向的 CollectionView，它们都放置在 ScrollView 中。垂直方向的视图变得仅与其中第一个项目一样高，并且它滚动......

xaml layout scrollview maui collectionview

回答 1 投票 0

如何恢复原来的窗口intellij布局

我没有选择“恢复默认布局”，而是错误地选择了“将当前布局存储为默认布局”，因此我当前的布局（我不想使用）被设置为默认布局。现在我无法回到原来的

layout intellij-idea

回答 3 投票 0

如何根据屏幕键盘高度调整Flutter DropdownMenu高度？

在下面的代码中，我打算根据屏幕键盘的存在/不存在来设置 DropdownMenu 的高度。我还考虑了其他元素的高度，例如 AppBar 和

flutter dynamic layout drop-down-menu on-screen-keyboard

回答 1 投票 0

为什么当我添加滚动视图时我的 ViewPager 不显示任何内容？

我有一个框架布局，想要填充 50% 的屏幕分辨率，然后是下面的选项卡布局和一个基于选项卡的具有 3 种不同片段布局的视图分页器。选项卡/viewpager 工作并显示 l...

android kotlin layout android-viewpager scrollview

回答 1 投票 0

通过setVisibility隐藏和可见布局时按钮移动？

我有以下布局代码，它们在窗口管理器中膨胀并显示在浮动窗口中。我有以下布局代码，它们在窗口管理器中膨胀并显示在浮动窗口中。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/topMenu"> <ImageButton android:id="@+id/mainButton" android:layout_width="60dp" android:layout_height="60dp" android:src="@mipmap/robot_foreground" /> </LinearLayout> <LinearLayout android:id="@+id/mainMenu" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" tools:visibility="visible"> <Button android:id="@+id/menu1" android:layout_width="wrap_content" android:layout_height="60dp" android:drawableLeft="@drawable/ic_launcher_foreground" android:text="Item1" /> <Button android:layout_width="wrap_content" android:layout_height="60dp" android:drawableLeft="@drawable/baseline_6_ft_apart_24" android:text="Item2" /> </LinearLayout> </LinearLayout> 我通过单击 mainButton 通过 setVisibility 可见或隐藏 mainMenu 布局。 if (mainMenu.getVisibility() == View.VISIBLE) { mainMenu.setVisibility(View.GONE); } else { mainMenu.setVisibility(View.VISIBLE); } 隐藏或显示 mainMenu 布局后，mainButton 的位置发生变化。已经修复了显示或隐藏主菜单布局时主按钮的位置。我搜索了所有问题，但什么也没找到。请帮助我您需要使用INVISIBLE而不是GONE，因为后者不占用布局空间。文档中是正确的：消失该视图是不可见的，并且不占用任何布局空间。 INVISIBLE 此视图是不可见的，但出于布局目的，它仍然占用空间。

android layout

回答 1 投票 0

布局之间的角度变化检测需要重新加载

我需要在不破坏任何逻辑的情况下更新项目的 UI（我破坏了）。在旧的 UI 身份验证（登录页面）和其余部分（身份验证后您可以访问的其他资源）中...

angular layout data-binding storage angular2-changedetection

回答 1 投票 0

Android 工具栏出现在屏幕底部而不是顶部

我试图在事件发生后在屏幕底部设置一个工具栏，但该工具栏被绑定到屏幕顶部。知道如何将其设置在屏幕底部吗？应用程序：第...

android layout toolbar

回答 3 投票 0

响应式布局中的全高侧边栏

我正在尝试创建一个带有全高侧边栏的响应式布局。在桌面上，侧边栏应浮动在主要内容的左侧，在平板电脑/移动设备上，侧边栏应与主要内容重叠...