CSS – 挨踢攻城獅學習之路

CSS：Label、Input自動縮放寬度佔滿容器

Qoo — Sun, 13 Oct 2019 09:45:10 +0000

在製作表單時，想將Label放置於左邊，Input放在右邊，並讓Input隨視窗大小，自動縮放佔滿容器，像這樣

調大調小都可以吃滿，以下範例


        名稱：

可以在CSS加入float

.left{
    float:left;
    width:80px;
}
.right{
    width:calc(100% - 80px);
}

讓Label float於左側，寬80px。Input 的寬用calc( 100% 去減掉 label的寬80px)

CSS：讓footer能在頁面底部

Qoo — Mon, 23 Sep 2019 14:09:10 +0000

同組人員製作網頁時碰到，當Search出來的結果太少，會導致body的高不足至整個頁面，而讓footer出現在畫面中間(尷尬)
我原本想著body設置min-height:100vh，footer設 absolute 及bottom 0
結果變成這樣

最後Google到這篇：Sticky Footer – 让footer永远置于页面最底端
min-height設置在html，並設為relative。
body的margin-bottom 設置同footer的height，以避免footer蓋到body內的其他元素

html {
    min-height: 100%;
    position: relative;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 80px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
}
————————————————
版权声明：本文为CSDN博主「EagleMaze」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lgyaxx/article/details/75020183

上面這篇，我在使用Element UI時，沒作，改依這篇處理


    


    
        
            我是第一個div
        
        
            我是第二個div
        
        
            我是第三個div

改完大致如下

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
a {
  text-decoration: none;
}
#app {
  min-height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.el-main.main-page {
  overflow: unset;
  flex-grow: 1;
}
.el-footer {
  width: 100%;
  height: 60px;
}

就可以了

WordPress：Elementor在IE 11、Edge踩坑1：段高度無法套用到欄背景圖

Qoo — Sat, 13 Apr 2019 15:26:59 +0000

Elementor，在使用Inner Section將段切為2欄時，設定段的高度假設為400px，並在2欄各設定背景圖。
Chrome背景圖可正常顯示沒問題，但IE不起作用，要再自訂CSS才能正常顯示背景圖

修改前

背景圖無法正常顯示

加入CSS

 .elementor-element-bebdc6c,.elementor-element-f96557f {
     height:400px; //背景圖高度自訂
 }

修改後

背景圖可正常顯試了