el-container怎么实现满屏布局

向各位大佬请教:
我在vuejs项目中使用element-ui进行页面布局,el-container作为容器,子元素为el-header,el-main,el-main只有一张logo图片,el-header只有一个登录框,那么el-container怎么实现满屏布局呢?
望各位大佬不吝赐教!小白我十分感谢!

0

3个回答

-1
0
github_38546328
秋豆麻袋 回复wenjunlong88_easy: 谢谢
4 个月之前 回复
lys20054140624
lys20054140624 回复wenjunlong88_easy: nb
6 个月之前 回复
breavo_raw
泡泡茶壶 回复wenjunlong88_easy: 这个好使,谢谢
8 个月之前 回复
zhongxunking
zhongxunking 回复wenjunlong88_easy: 你的才是正解,感谢
大约一年之前 回复
wenjunlong88_easy
wenjunlong88_easy <div id="app" style="position:absolute; left:0; top:0; width:100%;height:100%;">
大约一年之前 回复

参考https://www.cnblogs.com/lccluyan/p/8351787.html
不知道你们能不能用到
图片说明
代码样例

<template>
  <el-container>
    <el-header>Header 默认 height: 60px;</el-header>
    <el-container :style="height">
      <el-aside width="200px">Aside</el-aside>
      <el-main>
        <el-col>
          <span>Main</span>
        </el-col>
        <el-col>
          <span>height:window.innerHeight - 120</span>
        </el-col>
        <el-col>
          <span>(右侧通常会有上下滚动栏,120 + 16左右就会消失)</span>
        </el-col>
      </el-main>
    </el-container>
    <el-footer>Footer 默认 height: 60px;</el-footer>
  </el-container>
</template>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

<script>
export default {
  data () {
    return {
      height: {
        height: window.innerHeight - 136 + 'px'
      }
    }
  }
}
</script>

图片说明

参考https://www.cnblogs.com/lccluyan/p/8351787.html

0
qwty146
qwty146 你这个才是正解,前面贴的答案有点答非所问,用position:absolute那还不如不用布局控件呢。
5 个月之前 回复
qwty146
qwty146 你这个
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Scrollview布局不能满屏
项目中出现在ScrollView下的控件加了marginBottom="xdp"后发现并不是在屏幕底端 解决: 加入fillViewPort="true"即可 xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:la
一个满屏品字布局怎么设计?
需要用到技术1. 元素水平居中对齐1) 使用margin对齐(推荐)2) 使用left:50%3) 使用text-align:行内元素居中对齐,给父元素设置text-align: center 2. 元素对相对窗口定位1) 使用filxed(推荐):总是根据浏览器的窗口来进行元素的定位2)
满屏开满玫瑰花(图片)那个怎么实现的
满屏开满玫瑰花(图片)那个怎么实现的
一个满屏品字布局如何设计
代码:&amp;lt;html&amp;gt; &amp;lt;head&amp;gt;&amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;div class=&quot;first&quot;&amp;gt; &amp;lt;div class=&quot;up&quot;&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;div class=&quot;second&quot;&am
flash能不能实现满屏
做出来的swf文件都是有它的框框能不实现像powerpoint那样来演示呢?
Qt5.0+VS2010实现的满屏玫瑰
Qt5.0+VS2010实现的满屏玫瑰,还可以自定义你想对她说的话,表白神器啊
设计一个满屏品字布局
设计一个满屏品字布局经常会出现在前端的面试或是笔试题目中,需要对CSS能够灵活的运用。首先,这里面涉及到的相关知识点有: 1.元素的水平居中: 使用margin:0 auto;可以水平居中; 使用text-align:center;给父元素设置使其行内元素水平居中。 2.元素相对窗口定位: 使用position:fixed;固定定位,元素总是根据浏览器的窗口进行定位; 使用positio...
这种布局怎么实现????
[img=http://img.my.csdn.net/uploads/201212/24/1356336702_9868.png][/img]rnrn这种布局怎么实现...???
怎么实现如图的布局?
[img=http://hi.csdn.net/attachment/201004/18/0_12716095339I5G.gif][/img]rn
CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)
带DOCTYPE的写法。。 ------------------ CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
简单实现elementui的el-container布满全屏
简单实现elementui的el-container布满全屏 在使用elementui的布局元素的时候,会遇到一个问题,那就是照着官方文档弄出来的布局元素不能实现满屏。 我们从官方文档拷贝实现的效果如图: 很显然,这不是我们想要的效果,我们要把它布满全屏. 经过我的多次尝试,我找到了一种解决办法,解决代码如下 &lt;style type="text/css"&gt; /* 找到ht...
利用snowfall.jquery.js实现爱心满屏飞或点点满屏飞
&amp;lt;!doctype html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;HTML模板&amp;lt;/title&amp;gt; &amp;lt;meta charset='utf-8'&amp;gt; &amp;lt;meta name='keywords' content=',,'&amp;gt; &amp;lt;meta name='description' conten
请问如何实现TextEdit的满屏?
[img=http://hiphotos.baidu.com/kdgao/pic/item/d1f9622524dde61e935807ea.jpg][/img]rn[code=XML]rnrnrnrn rn rn rn rn rn rn rn rn rnrnrnrn[/code]
.net实现网站满屏的问题
rn先跟各位路过的朋友们问声好rnrn最近在做一个网站rn头部包含了一个超大的图片有1423像素的宽度rn等到做完了之后 rn客户说小一点的显示器打开网站,下面有很长的滚动条 那样不好看rnrn要做成不管是17寸 还是19寸打开网站 看到的都是满屏的,不能有滚动条rnrnrn至此 我就彻底的不知道用什么办法实现了rnrn想请教站各位朋友 像这种情况 rn一般要用到什么法子呢? 一般要怎么样做比较方便 实用?rnrnrn望各位路过的朋友们 不吝赐教rn
ExpandableListView怎么实现不同的布局?
第一个是设计图,第二个是我目前做出来的,我想要实现每个child的布局都不一样,比如第一张图的商品标签是有文本框有按钮,而商品类别只有文本框,那是需要每个child都要一个xml文件吗?那岂不是要很多个布局文件?
这样的布局,该怎么实现
[img=https://img-bbs.csdn.net/upload/201307/28/1374971147_115090.jpg][/img]这样的布局如何切割图片,如何写布局文件,标签个数>3rn求解答
WPF,这个布局怎么实现?
[code=html]rnrn rn rn rn rn rn rn rnrn[/code]rn[img=https://img-bbs.csdn.net/upload/201404/08/1396937074_395634.jpg][/img]rn上面的代码中,Button在Canvas内部,由于绝对定位尺寸的原因,Button超出了Canvas的边缘。在Canvas外部,还有一个Viewbox元素,Button也超出了Viewbox的边缘。目前有两个问题请教:rn1:Button为什么会超出Viewbox的边缘呢,Viewbox不是可以缩小元素的吗,把Canvas和Button缩小就不会超出边缘了啊?rn2:如何实现这个功能:当Button触及Viewbox边缘的时候,就缩小Canvas和Button,使得Button不超出Viewbox的边缘呢?
这种布局是怎么实现的
[img=https://img-bbs.csdn.net/upload/201310/30/1383121718_883376.png][/img]rnrn并且可以手动添加rnrn如果得到解决,马上结贴
html页面上中下布局怎么实现
一个系统的默认界面,想分为上中下三部分,页头为固定页面,有链接,中间动态显示内容,页脚为固定页面。要求点击页头链接时,中间部分刷新,不是整个页面包括页头页脚都刷新。求详细代码。rn原来用iframe,布局没掌握好
Winform这种布局怎么实现?
一直在做ASP.NET开发,最近在做Winform遇到几个问题。rn1.图中这种表格类型的布局怎么实现?rn2.图中类似于记账凭证的金额输入方式有怎么办法实现吗?rnrn我项目中使用的是DevExpress控件,如果Dev中有控件能实现我上面所说的,还请大家指点一下。rn[img=https://img-bbs.csdn.net/upload/201408/11/1407766166_453005.jpg][/img]
winform怎么实现绘图和布局
[img=https://img-bbs.csdn.net/upload/201606/21/1466488750_382913.png][/img]这种页面该怎么弄出来呢?求大牛帮助。[img=https://img-bbs.csdn.net/upload/201606/21/1466488862_465077.png][/img]
这个布局是怎么实现的
用了些什么控件。分隔线,商品名,图片 ,hot标志分别用的是什么控件,怎么布局的rn[img=https://img-bbs.csdn.net/upload/201504/07/1428395307_786430.jpg][/img]
listview怎么实现这种布局
[img=https://img-bbs.csdn.net/upload/201603/30/1459323543_307363.png][/img]rnrn[code=text] rn rn rn rn rn [/code]rn预览界面可以实现,夹在数据之后全是一个一行,什么原因
满屏玫瑰花
满屏玫瑰花 无聊的时候看看
玫瑰花满屏
这是一个小程序,运行之后,会看到满屏的鲜花。停止的方式也非常简单,只需要鼠标点击一下屏幕即可退出。designed by snowfox wyb
qml怎么实现窗口直接跨屏满屏显示
我用的ubuntu16.04系统,有两块1280x720的屏幕,其中一块作为扩展屏。我想写一个窗口,打开之后直接同时铺满两块屏幕,也就是2560x720大小的窗口,无边框的。main.qml顶层用的Window实现的,直接把窗口大小定义为2560x720的或者改变visibility、flag属性都没用,还有什么方法可以尝试呢?
满屏显示
有没有办法让打开一个窗体就是显示器的满屏,rn不管是1024*768还是800*600
如何满屏?
像这个一样,www.ninjai.comrnrn分辨率只要不低于800*600,那么最大化后的页面都是填满整个屏幕的,怎么做?rnrn谢谢
div 满屏
[code=HTML]rnrnrn rn Indexrn rnrnrnrn rnrnrnrn[/code]rnrn为什么我的div垂直方向不能满屏?看不见呢?rn如何做到垂直方向满屏阿谢谢!
满屏焦点图
jquery图片滚动效果,制作一个非常大气简洁的banner焦点图满屏左右滚动切换效果,点击左右两侧按钮控制图片满屏滚动切换。
满屏问题
一张图片(大小不是固定),一种是宽度按width=100%, 另一种按高度height=100%,这样保证无论宽度和高度是多少,都能显示在一个一个页面内不出现滚动条。可是如果有一段文字,文字上面,下面有图片时就显示不全出现滚动条,请问如何解决这种混排情况,显示到一个页面不出现滚动条?谢谢
请问怎么在在delphi中实现视频文件的满屏播放啊!
请问怎么在在delphi中实现视频文件的满屏播放啊,假设我指定的播放窗口是一个panel,怎么样使它满屏,然后怎么样使它又回复到以前的样子呢,在下是初学者,请多多关照。
elment ui 中el-container使用不当带来的错误
控制台报的错误类型: 1.[Vue warn]: Error in render: “TypeError: Cannot read property ‘length’ of undefined” 2.TypeError: Cannot read property ‘length’ of undefined 3.[Vue warn]: Error in mounted hook: “TypeE...
IOS纯代码布局上下黑边不满屏问题
对于新建的IOS工程项目,会自动生成storyboard文件并使用,如果想使用纯代码布局的话,则需要修改工程配置,删除storyboard文件,然后运行工程发现屏幕上下有黑边,需要添加一个参数,附件有说明
Launcher 桌面布局右侧不满屏代码跟踪记录
平台: RK3399 + Android8.1 屏幕分辨率: 1920x1080 DPI: 280 问题 Launcher及满屏APP, 显示时, 屏幕右边会显示不全, 不到边. 分调试信息: Activity: dumpsys activity mCurrentUser=0 mLastStartReason=startHomeActivity: noMoreActivities res...
为了美观,怎么显示满屏的网格了??????
用DBGrid作为录入数据的控件,避免more Edit and Label 。省去很多精力.rn但为了美观,怎么显示满屏的网格了:如下:rnrn 当新增记录时:select * from table where 1=0 ;rnrn DBGrid.Datasoure:=DataSource1;rn ADOQuery1.LockType:=ltBatchOptimistic; //以缓存方式提交数据.rnrn 这时显示的只有一行,其他地方白白空空的。很难看,能不能用网格填充,这样会美观很多。rnrn 数据以缓存方式提交数据,最后在(ADOQuery2.UpdateBatch)提交的数据库.rn rn 最好能列首显示序列:rnrn NO ID Name Sex rn ---------|-------------|------|----------|rn 1_录入中_|_____________|______|__________|rn 2________|_____________|______|__________|rn 3________|_____________|______|__________|rn 4________|_____________|______|__________|rn .....rnrn 不知DBGridEh如何实现,RowCount>0 会出错。rnrn 更改 UpdataRowCout 方法麻烦,请帮助,谢谢!rnrn http://community.csdn.net/Expert/topic/4907/4907323.xml?temp=.8658106rnrnrnrn rn rn 请教各位高手.rn
两列布局,三列布局的实现
一、两列布局 1、利用BFC &amp;lt;div class=&quot;left&quot;&amp;gt; left &amp;lt;/div&amp;gt; &amp;lt;div class=&quot;right&quot;&amp;gt; right &amp;lt;/div&amp;gt; * { padding: 0; margin: 0;} .left{ float: left; width: 200px; height: 80...
布局总结-水平居中布局的实现
CSS布局 一、左右布局 1、float实现左右布局 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &...
怎么将MediaPlayer1放映的东西最大化(满屏)?
怎么将MediaPlayer1放映的东西最大化(满屏)?
七夕表白程序,qt实现满屏玫瑰
功能: 1、运行后桌面会慢慢显示出一朵朵玫瑰。直至鼠标单击或者有键盘输入。 2、同时单曲循环播放同目录下的音频文件
相关热词 c# 线程顺序 c#昨天当前时间 c# 多进程 锁 c#mysql图片存取 c# ocx 委托事件 c# 读取类的属性和值 c# out 使用限制 c#获取url的id c#怎么进行分页查询 c# update 集合