文章詳情頁
css - 使用 min-height:calc( 100vh - 64px )問題
瀏覽:86日期:2023-06-30 09:15:52
問題描述
我現在想實現一個p的高度為100vh再減去導航欄的64px,使用min-height:calc( 100vh - 64px )為什么在瀏覽器上得出36vh的結果,并不是我想要的結果,請問一下要怎么設置才能得到想要的結果
問題解答
回答1:說說我的做法吧,雖然不知道你的結構,不過我能80%的肯定你的結構如下
<nav>導航</nav><main>主內容</main>
nav + main的高度最少為100vh,nav固定為64px對吧?
這個結構總得有個外部容器吧?我先暫且認為這個外部容器是body,
一種辦法就是
body { min-height: 100vh; display: flex; flex-direction: column;}nav { height: 64px;}main { flex: 1 1 0;}
其實還有很多別的辦法,不過各有各的缺陷,這個也有缺陷,就是不知道適不適合你。
好吧!我想說的是,你最好把你的結構和想要實現的效果都表達出來,否則我只能揣測著回答你,蠻浪費時間。
標簽:
CSS
相關文章:
1. javascript - vue 移動端的input 數字輸入優化2. java - mongodb分片集群下,count和聚合統計問題3. java - 自己制作一個視頻播放器,遇到問題,用的是內置surfaceview類,具體看代碼!4. android - java 泛型不支持數組,那么RxJava的Map集合有什么方便的手段可以定義獲得一串共同父類集合數據呢?5. 服務器端 - 采用nginx做web服務器,C++開發應用程序 出現拒絕連接請求?6. 為什么我ping不通我的docker容器呢???7. 關于docker下的nginx壓力測試8. python - pandas按照列A和列B分組,將列C求平均數,怎樣才能生成一個列A,B,C的dataframe9. javascript - 有什么兼容性比較好的辦法來判斷瀏覽器窗口的類型?10. java - 靜態屬性中的賦值和靜態代碼塊中的賦值有什么區別?
排行榜
