VUE-多元素垂直排列,有一列自動填充
效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.outer {
width: 100%;
height: 100%;
background: #dcdfe6;
padding-top: 200px;
box-sizing: border-box;
position: relative;
}
.search {
height: 100px;
background: #5daf34;
position: absolute; top: 0 ; left: 0 ; width: 100%;
}
.funtools {
height: 100px;
background: #3a8ee6;
position: absolute; top: 100px ; left: 0 ; width: 100%;
}
.gridPanle {
height: 100%;
background: #4efffb;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function hideSearch(){
$('#search').hide();
$('#funtools').css("top",0);
$('.outer').css("padding-top", "100px");
}
function showSearch(){
$('#search').show();
$('#funtools').css("top",'100px');
$('.outer').css("padding-top", "200px");
}
</script>
</head>
<body>
<div class="outer">
<div id="search" class="search">
search
</div>
<div id="funtools" class="funtools">
funtools
<input type="button" value="隱藏查詢欄" onclick="hideSearch()">
<input type="button" value="顯示查詢欄" onclick="showSearch()">
</div>
<div id="gridPanle" class="gridPanle">
grid
</div>
</div>
</body>
</html>
相關文章
- 有重複元素的全排列
- 元素自適應水平垂直居中
- flutter 父級寬度不固定,子集多個元素自動填充的佈局方案方法Flutter
- 有重複元素的排列問題
- 浮動流元素排列規則
- mybatis自動填充多個表相同欄位的值MyBatis
- CSS自動居中一列布局CSS
- Spring AOP 實現《自動自動填充Entity》Spring
- AASubviews - 自動排列子檢視View
- Win10桌面取消自動排列,重新整理仍然有圖示移動——適用於桌面排列患者Win10
- CSS3實現文字垂直排列CSSS3
- 元素垂直水平居中
- mybatis自動填充時間欄位MyBatis
- mybatisplus欄位值自動填充MyBatis
- div垂直居中-CSS元素垂直居中方法CSS
- 關於元素排列的DFS
- JavaScript陣列元素全排列JavaScript陣列
- 禁用 element 中v-input 自動填充
- android 8.0 Autofill Framework (自動填充框架)AndroidFramework框架
- 讓一個元素水平垂直居中,到底有多少種方案?
- css水平元素寬度自適應均勻排列程式碼例項CSS
- Vb中控制元件的自動排列 (轉)控制元件
- 相容所有瀏覽器長寬自適應元素垂直水平居中瀏覽器
- 如何自動填充SQL語句中的公共欄位SQL
- 如何關閉 Windows 7 視窗自動排列功能?Windows
- CSS 文字li元素中垂直居中CSS
- 元素水平居中,垂直居中方法
- oracle一列拆分為多列Oracle
- 一列寬度固定一列寬度自適應佈局
- 【mybatis-plus】主鍵id生成、欄位自動填充MyBatis
- Mac Monterey如何設定自動填充登入密碼?Mac密碼
- Mybatis-plus學習筆記(十一)自動填充功能MyBatis筆記
- 基於JQuery實現的文字框自動填充功能jQuery
- MyBatis-Plus-實用的功能自動填充欄位MyBatis
- springboot~jpa審計欄位的自動填充Spring Boot
- 不定寬高元素的水平垂直居中
- 位置寬高元素垂直水平居中效果
- 從搭建vue-腳手架到掌握webpack配置(四.自動化封裝)VueWeb封裝