div{ height:100vh; background-color:gray; } - Mohit Sharma 5 现在有了css3,你可以试着使用calc()函数。 .main{ height: calc(100% - 111px); } 请看这个答案:Div width 100% minus fixed amount of pixels。这个答案涉及到IT技术。 - RaphKomjat 1 我猜你在尝试获取吸底部 - n1313...
CSScalc()Function ❮ CSS Functions Reference Example Use calc() to calculate the width of a element: #div1{ position:absolute; left:50px; width:calc(100% - 100px); border:1px solid black; background-color:yellow; padding:5px; text-align...
body { margin: 0; } #top { height: 50px; background: yellow; } #bottom { background: lightgrey; min-height: calc(100vh - 50px); } Where `min-height: calc(100vh - 50px);` means: 'Let the height of the content div be **at least** 100% of the viewport height minus the ...
px % em rem in mm cm pt pc ex ch vh vw vmin vmax Unit-less numbers are acceptable, too. For exampleline-height: calc(1.2 * 1.2);as well as angles liketransform: rotate(calc(10deg * 5));. You can alsonotperform any calculation and it is still valid: ...
height: 100px; background: linear-gradient(to bottom, #ffffff 0%, #999 100%); } .container { display: flex; flex-direction: column; flex-wrap: wrap; height: calc(100vh - 100px); } .button { width: 200px; height: 50px;
height: calc(var(--a) + 7px); We need to keep a few things in mind to ensure that thecalc()function works. First, division by zero obviously won’t work. Having a space between the function name and the parenthesis is not allowed. And the plus and minus operators must be surrounded...
Calculating the height of an element based on the viewport height minus a specific value: "height: calc(100vh - 100px);". 25. How do you create a print-friendly CSS style sheet for a web page?Hide Answer To create a print-friendly CSS style sheet for a web page, you can use media...
class="fixed bottom-8 right-4 bg-[var(--pd-modal-bg)] min-h-96 h-3/4 w-[calc(100%-52px-theme(width.leftnavbar))] z-40 border border-[var(--pd-modal-border)] rounded-md shadow-xl shadow-black"> class="fixed bottom-8 right-4 bg-[var(--pd-modal-bg)] min-h-96 h-3/...
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores laudantium quas reprehenderit ...
If there are 2 values (e.g. something likeinset-ua-chrome-smallandinset-ua-chrome-large), what would it take to get a full-height element? For example: height:100vhc; vs height:calc(100vh-env(inset-ua-chrome-small)+env(inset-ua-chrome-large)); ...