【求助】四格布局中，右上块怎么向右向下填充？ - css吧

level 1

bytheworld073 楼主

布局如图。问题：右上块怎么向右向下填充？
css里怎么写？谢谢！

2021年09月02日 08点09分 1

level 1

bytheworld073 楼主

左上：
.left-bar .bar-item {
position: absolute;
top: 0px;
bottom: 0px;
height: auto;
width:170px;
}
左下：
.left-bar .barfooter {
position:fixed;
}
右下：
.footer {
position:fixed;
bottom:0px;
line-height: 35px;
}
这3块大概这么个意思，
右上块怎么写？
老是填充了右边，下边留意大块空白。
或者填充了下边，右边留大块空白。

2021年09月02日 09点09分 2

level 1

bytheworld073 楼主

HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>四格布局</title>
<link rel="stylesheet" href="iconfont/iconfont.css">
<link rel="stylesheet" href="css/newpage1.css">
<script language="javascript" type="text/javascript" src="js/server.js"></script>
</head>
<body>
<aside class="left-bar" id="leftBar">
<div class="title"><p>标题</p></div>
<div class="item active"><a href="#top"><i class="iconfont icon-paper-plane"></i>页面导航</a><i class="line"></i></div>
<ul class="bar-item" id="barItem" onClick="clickleftbar()">
<li><a href="#a1" class="active"><i class="iconfont icon-gift"></i>选项1</a></li>
<li><a href="#a2"><i class="iconfont icon-tool-hardware"></i>选项2</a></li>
<li><a href="#a3"><i class="iconfont icon-icon-test "></i>选项3</a></li>
<li><a href="#a4"><i class="iconfont icon-authority"></i>选项4</a></li>
<li><a href="#a5"><i class="iconfont icon-icon-test1"></i>选项5</a></li>
</ul>
<button id="lbarbtn" onClick="lbarbtn()">三</button>
<footer class="barfooter"><a target="_self" href="#"><i class="iconfont icon-waiting "></i>留言</a> </footer>
</aside>
<section class="main" id="maint">
<iframe class="myiframe" id="mainiframe"
src="html/welcome.html"></iframe>
</section>
<footer class="footer" id="footert">
<div class="copyright">
<div>
<a href="#"> 这是右下角</a>
</div>
</div>
</footer>
</body>

2021年09月02日 09点09分 3

level 1

bytheworld073 楼主

CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width:100%;
}
select::-ms-expand { display: none; }
li { list-style: none;}
.left-bar a { text-decoration:none;color: inherit; }
body {
font-size: 15px;
color: #4d4d4d;
font-family: Helvetica Neue,Microsoft Yahei;
}
body, .main {background: #f3f6f8;}
.iconfont {color: #6b7386;padding-right: 4px;}
.left-bar {
position: absolute;
padding: 0px 20px 0px 0px;
background: #30333c;
color: #6b7386;
height: 100vh;
width: 200px;
bottom: 0px;
display:inline-block;
-moz-transition: margin-left 2s;
transition: margin-left 2s;
}
.left-bar .title {
position: relative;
color: white;
font-size: 18px;
height: 50px;
width:100%;
line-height: 50px;
text-align:center;
}
.left-bar .item {
position: relative;
color: white;
top:0px;
height: 46px;
width:100%;
line-height: 46px;
padding: 0px 0px 0px 15px;
border-top: 2px solid rgba(255, 255, 255, 0.04);
border-bottom: 2px solid rgba(255, 255, 255, 0.04);
}
.left-bar .barfooter {
position:fixed;
z-index: 100;
color: white;
width: 191px;
height: 46px;
line-height: 46px;
bottom:0px;
padding: 0px 0px 0px 15px;
background-color: rgba(0,0,0,0);
border-top: 2px solid rgba(255, 255, 255, 0.04);
}
.left-bar .bar-item {
position: absolute;
top: 120px;
bottom: 0px;
height: auto;
width:170px;
margin: 0px 0px 50px 0px;
margin-bottom:46px;
overflow-y: scroll;
background-color: rgba(0,0,0,0);
font-size: 14px;
}
.left-bar #lbarbtn {
position: relative;
top: 22%;
left: 210px;
height: 75px;
width:20px;
background: #30333c;
color: #fff;
cursor: pointer;
border:0;
}
.left-bar .active:hover i,
.left-bar .barfooter:hover a,
.left-bar .barfooter:hover i,
.left-bar .bar-item li:hover a,
.left-bar .bar-item li:hover i ,
.left-bar .active
{color: #fff;font-size: 15px;}
.left-bar .bar-item li {
height: 30px;
line-height: 30px;
}
.main {
-moz-transition: margin-left 2s;
transition: margin-left 2s;
margin-left:240px;
//这里怎么写这里怎么写这里怎么写这里怎么写这里怎么写
//这里怎么写这里怎么写这里怎么写这里怎么写这里怎么写
//这里怎么写这里怎么写这里怎么写这里怎么写这里怎么写
//这里怎么写这里怎么写这里怎么写这里怎么写这里怎么写
background-color: #cc85d9;
}
.myiframe{
position: relative;
width:100%;
height:100%;
}
.footer {
position:fixed;
bottom:0px;
line-height: 35px;
-moz-transition: margin-left 2s;
transition: margin-left 2s;
margin-left:260px;
white-space:nowrap;
}

2021年09月02日 09点09分 4

level 1

bytheworld073 楼主

JS:
function lbarbtn(){
var box1 = document.getElementById("leftBar")
var btn = document.getElementById("lbarbtn")
var box2 = document.getElementById("maint")
var box3 = document.getElementById("footert")
if (box1.offsetLeft == 0) {
box1.style['margin-left'] = -220 + "px";
box2.style['margin-left'] = 20 + "px";
box3.style['margin-left'] = 50 + "px";
} else {
box1.style['margin-left'] = 0 + "px";
box2.style['margin-left'] = 240 + "px";
box3.style['margin-left'] = 260 + "px";
}
}
function clickleftbar(){
var oNavItem = document.getElementById('barItem');
var aA = oNavItem.getElementsByTagName('a');
for(var i=0; i<aA.length; i++) {
aA[i].onclick = function() {
for(var j=0; j<aA.length; j++) {
aA[j].className = '';
}
this.className = 'active';
}
}
}

2021年09月02日 09点09分 5

level 6

手心🌸🌸🌸

什么意思?没看懂

2021年09月03日 00点09分 6

level 6

手心🌸🌸🌸

右下填充? 是高度100%吗

2021年09月03日 00点09分 7

bytheworld073

100%高度和右下固定部分的重叠了。

2021年09月03日 03点09分

level 6

手心🌸🌸🌸

你要填充的地方css这样写
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
margin-bottom: 右下固定高度
当position为absolute或fixed的时候若存在对立方位属性的时候, 其宽度由父容器决定(会填充父容器宽度高度)

2021年09月04日 07点09分 8

bytheworld073

OK，这个问题搞了2天，晕头转向。谢谢你了。

2021年09月04日 10点09分

bytheworld073

之前用position: absolute; left: 0; right: 0;top: 0; margin-bottom: 漏了一个bottom: 0;露出一大截。

2021年09月04日 10点09分

bytheworld073

然后网上各种搜，又试了N种，不是这边没遮住，就是那里露出来。真心感谢你。

2021年09月04日 10点09分

手心🌸🌸🌸

不客气有问题就在贴吧问会的就告诉你们了 [呵呵]