使用 position: fixed 屬性時，如何使元素的寬度占其父元素的百分比？

Question

這里我有以下結構： parent > container > main-section > post_creation > h3和一個input字段。

我需要將h3元素固定在屏幕上，這樣當我上下滾動時，h3 元素仍然可見。 同時，我需要h3元素的寬度為post_creation的 98%。 但是，發生的情況是寬度設置為頁面寬度的 98%。

 .parent { height: 200vh; width: 400px; } h3 { position: fixed; width: 98%; }

 <body> <div class="parent"> <div class="container"> <div class="left-section"></div> <div class="main-section"> <div class="post_creation"> <h3>home</h3> <input type="text" placeholder="Aliens thinking of what?"> </div> </div> <div class="right-section"></div> </div> </div> </body>

Answer 1

當一個元素有一個fixed的 position 時，它被從正常的 html 流中取出，因此該元素對其周圍的元素一無所知。 因此，您只能將其寬度設置為周圍window的百分比。

您可以使用 javascript 來獲得您想要的。 只需使用 class post_creation元素width的 98%（在本例中為400px ），並將h3設置為該寬度（在本例中392px ）。

 var postCreationEl = document.querySelector('.post_creation'); var h3Element = document.querySelector('h3'); var style = window.getComputedStyle(postCreationEl, null); var width = style.width; width = parseInt(width.replace("px", "")); var widthForH3 = Math.floor(width * (98 / 100)); h3Element.style.width = widthForH3.toString() + "px";

 .parent { height: 200vh; width: 400px; background-color:blue; } h3 { position: fixed; background-color:red; }

 <div class="parent"> <div class="container"> <div class="left-section"></div> <div class="main-section"> <div class="post_creation"> <h3>home</h3> <input type="text" placeholder="Aliens thinking of what?"> </div> </div> <div class="right-section"></div> </div> </div>

使用 position: fixed 屬性時，如何使元素的寬度占其父元素的百分比？

問題描述

1 個解決方案

解決方案1
0 2022-07-02 20:58:08

使用 position: fixed 屬性時，如何使元素的寬度占其父元素的百分比？

問題描述

1 個解決方案

解決方案1 0 2022-07-02 20:58:08

解決方案1
0 2022-07-02 20:58:08