height 相关问题

确定Y轴上对象大小的属性。请不要使用此标记，它在您的帖子中没有分类值。

我有以下代码，我试图构建一个没有设置高度的模态，但确实有一个最大高度，因此它会根据其内容进行调整，但不会增长到超过特定限制。亲...

html css flexbox overflow height

回答 1 投票 0

https://chuk-norris-jokes.onrender.com/ 我想将的背景颜色：rgba(0, 0, 0, 0.5)拉伸到屏幕的整个高度。 https://chuk-norris-jokes.onrender.com/ 我想将的背景颜色：rgba(0, 0, 0, 0.5) 拉伸到屏幕的整个高度。获得“overlay”类 onclick。但是当笑话块很多时，高度就不会拉伸到全高。当高度静态时一切正常。媒体屏幕 820px-1280px 出现问题 (https://i.sstatic.net/4i63WcLj.png) (https://i.sstatic.net/lGSkyjS9.png) 我尝试设置 body {height: 100vh 或 100%} 我也设置了 .overlay{min-height:100vh 或 100%}。但是当水平滚动出现body和overlay时就不会拉伸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chuck Norris Jokes</title> </head> <body> <div id="overlay"></div> <div class="main_wrapper " id="mainWrapper"> <div class="content_wrapper"> <header class="header" id="header"> </header> <div class="title_wrapper" id="titleWrapper"> </div> <div class="form_wrapper" id="formWrapper"> </div> <div class="jokes_wrapper" id="jokesWrapper"> </div> </div> </div> <div class="sidebar hide" id="sideBar"> <h3 class="sidebar_title">Favorite</h3> <div class="favorite_jokes_wrapper" id="favJokesWrap"> </div> </div> </body> </html> body,html{ @apply min-h-screen; overflow: auto; } .main_wrapper{ @apply p-5 overflow-auto container min-h-full m-auto w-full relative md:m-auto md:p-2 md:pt-5 xl:max-w-[960px] xl:m-0; .content_wrapper{ @apply xl:max-w-[600px] xl:m-auto } }; .overlay{ @apply w-full absolute top-0 left-[-32px] bottom-0 right-0 min-h-full pointer-events-auto ; z-index: 2; background-color: rgba(0, 0, 0, 0.5);} .sidebar{ @apply container bg-light_grey absolute z-10 top-0 min-h-screen right-0 md:w-[56%] xl:block max-w-[480px];} .sidebar_title{ @apply hidden xl:block xl:m-10 font-medium text-xl text-sub_main_color; } .favorite_jokes_wrapper{ @apply flex flex-col mt-16 items-center justify-center min-h-full bg-light_grey xl:mt-5; .joke { @apply bg-white rounded-xl gap-5 md:pt-12 md:px-5 md:pb-5; border: 1px solid #F8F8F8; box-shadow: 0px 4px 6px 0px #0000001A; div{ @apply md:w-[298px]; } p { @apply text-sm font-normal; } h3{ @apply mt-0 bg-light_grey mt-2 text-10px ; } } } ` 这是因为 100vh 意味着 100 视口高度，当您滚动 overlay 高度不会改变并随着 main_wrapper 滚动时，我认为您需要的是将覆盖层固定在屏幕左侧，这样它就不会不随内容一起滚动解决方案是使用 fixed 代替 absolute 参考：

css responsive-design height

回答 1 投票 0

无需明确设置高度即可垂直溢出工作

我有一张桌子，由 3 部分组成标题内容页脚使用弹性盒，我做到了“内容”部分占据了所有可用的视图高度，但这

css flexbox scroll overflow height

回答 1 投票 0

显示小 Apexchart 图表时的高度问题

所以我正在使用 apexcharter 制作一个闪亮的图表应用程序，我需要制作非常小的直方图（大约 40/60 像素高），这些直方图将包含在具有其他关键统计数据的框中。一开始...

r height apexcharts

回答 1 投票 0

如何使用 Tkinter 创建两个具有相同高度的框架（顶部和底部）？

在 Tkinter Python 中，我想创建两个框架并将一个框架放在另一个框架之上，然后在这两个框架中分别插入一个 matplotlib 绘图。那，我设法做到了。问题是，当

python tkinter height frames

回答 1 投票 0

如何设置粘性元素的高度？

这是粘性元素的一个简单示例，但我想知道为什么我不能为粘性元素（绿色块）设置高度。。容器 { 背景：红色；显示：柔性；弯曲-

html css height sticky

回答 2 投票 0

如何在android中设置换行内容的最大高度？

在android中，如何创建一个具有最大高度并包裹内容的滚动视图，基本上它垂直包裹内容，但有最大高度？我试过在android中，如何创建一个具有最大高度并包裹内容的滚动视图，基本上它垂直包裹内容，但具有最大高度？我试过了 <ScrollView android:id="@+id/scrollView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:maxHeight="200dp" android:layout_alignParentBottom="true" > <LinearLayout android:id="@+id/maincontainer" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> </LinearLayout> </ScrollView> 但这不起作用？您可以将其添加到任何视图（覆盖从视图继承的类中的 onMeasure） @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if (maxHeight > 0){ int hSize = MeasureSpec.getSize(heightMeasureSpec); int hMode = MeasureSpec.getMode(heightMeasureSpec); switch (hMode){ case MeasureSpec.AT_MOST: heightMeasureSpec = MeasureSpec.makeMeasureSpec(Math.min(hSize, maxHeight), MeasureSpec.AT_MOST); break; case MeasureSpec.UNSPECIFIED: heightMeasureSpec = MeasureSpec.makeMeasureSpec(maxHeight, MeasureSpec.AT_MOST); break; case MeasureSpec.EXACTLY: heightMeasureSpec = MeasureSpec.makeMeasureSpec(Math.min(hSize, maxHeight), MeasureSpec.EXACTLY); break; } } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } 我扩展了 ScrollView 并添加了代码来实现此功能： https://gist.github.com/JMPergar/439aaa3249fa184c7c0c 希望有用。您可以通过编程方式完成。 private static class OnViewGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener { private final static int maxHeight = 130; private View view; public OnViewGlobalLayoutListener(View view) { this.view = view; } @Override public void onGlobalLayout() { if (view.getHeight() > maxHeight) view.getLayoutParams().height = maxHeight; } } 并将监听器添加到视图中： view.getViewTreeObserver() .addOnGlobalLayoutListener(new OnViewGlobalLayoutListener(view)); 当视图高度发生变化时，监听器将调用 onGlobalLayout() 方法。可以通过将视图包装到 ConstraintLayout 并使用 layout_constraintHeight_max 属性来完成。 <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" android:layout_height="200dp"> <ScrollView android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHeight_max="wrap" app:layout_constraintVertical_bias="0"> ... </ScrollView> </androidx.constraintlayout.widget.ConstraintLayout> 在上面的示例中，父级 ConstraintLayout 高度限制为 200dp，子级 ScrollView 高度包裹内容，直到小于 200dp。请注意，app:layout_constraintVertical_bias="0" 将子级 ScrollView 与父级的顶部对齐，否则它将居中。要设置滚动视图高度，您必须同时使用 2 个 linerlayout ，然后将 scrool view 设置为它们的子级，然后设置中间 linerlayout 布局：限制滚动视图高度的高度。 1.) 创建一个类来处理将最大高度设置为用户传递的值： public class OnViewGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener { private Context context; private int maxHeight; private View view; public OnViewGlobalLayoutListener(View view, int maxHeight, Context context) { this.context = context; this.view = view; this.maxHeight = dpToPx(maxHeight); } @Override public void onGlobalLayout() { if (view.getHeight() > maxHeight) { ViewGroup.LayoutParams params = view.getLayoutParams(); params.height = maxHeight; view.setLayoutParams(params); } } public int pxToDp(int px) { DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); int dp = Math.round(px / (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT)); return dp; } public int dpToPx(int dp) { DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics(); int px = Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT)); return px; } } 2.) 将其附加到视图并传递 DP 中的最大高度： messageBody.getViewTreeObserver() .addOnGlobalLayoutListener( new OnViewGlobalLayoutListener(messageBody, 256, context) ); 感谢@harmashalex 的灵感。我进行了修改，因为设置布局参数对 @harma 的代码不起作用。此外，dp 到 px 的转换对于减轻对它的疑惑是必要的。对harmashalex答案进行一些修改，我可以为任何视图传递所需的最大高度： import android.view.View; import android.view.ViewTreeObserver; public class MaxHeightForAnyView implements ViewTreeObserver.OnGlobalLayoutListener{ private int maxHeight = 130; private View view; public MaxHeightForAnyView(View view, int maxHeight) { this.view = view; this.maxHeight = maxHeight ; } @Override public void onGlobalLayout() { if (view.getHeight() > maxHeight) view.getLayoutParams().height = maxHeight; } } 只需将侦听器设置为 oncreate 中具有所需高度的任何视图即可： txtShowTrans.getViewTreeObserver().addOnGlobalLayoutListener(new MaxHeightForAnyView(txtShowTrans, 600)); 在这里您可以像这样设置 Scrollview 的高度 -: <ScrollView android:id="@+id/scrollView1" android:layout_width="match_parent" android:layout_height="200dp" android:layout_alignParentBottom="true" > <LinearLayout android:id="@+id/maincontainer" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> </LinearLayout> </ScrollView>

java android xml height

回答 8 投票 0

100vh 在 Safari iOS“单选项卡”配置上无法正常工作

我使用 Angular 将 iframe 加载到 html 中。在我的 ts 上我有 ngOnInit(): 无效...

jquery css iframe height mobile-safari

回答 1 投票 0

获取小部件高度时如何解决此错误？

我已经尝试过问题底部列出的来源中的代码。所以，到目前为止，我能够获得设备的物理和逻辑高度，屏幕键盘的逻辑高度，但我被卡住了......

flutter height

回答 1 投票 0

如何在获取小部件的高度以及颤振中可用工作区域的高度时解决此错误？

我正在计算两种情况下可用的有效空间：（01）当屏幕键盘不在屏幕上时，以及（02）当屏幕键盘在屏幕上时。有效空间是指可用空间...