gpt4 book ai didi

html - 技巧网页设计(全屏和非全屏元素)

转载 作者:太空宇宙 更新时间:2023-11-04 13:52:02 25 4
gpt4 key购买 nike

更新

在做了一些测试和本地主机修改后,我发现了我需要的东西:

网站不能滚动,只有内容区域。

缩放时侧边栏高度应始终保持在页面底部。

标题也必须放大和缩小但保持全宽

最佳答案

fiddle : http://jsfiddle.net/dkx2q/2/

可能是这样的:

CSS

body{
background-color:rgb(0,0,0);
}
#container{
display:block;
width:100%;
height:100%;
}
#fullScreenImage{
float:left;
width:25%;
height:100%;
background-color:rgb(124,197,118);
position:relative;
}
#content{
float:left;
width:75%;
height:100%;
}
#header{
display:block;
height:15%;
background-color:rgb(94,142,178);
position:relative;
}
#sidebar{
float:left;
height:85%;
width:20%;
background-color:rgb(162,94,179);
position:relative;
}
#contentArea{
float:left;
width:80%;
height:85%;
background-color:rgb(255,255,255);
position:relative;
}
span{
position:absolute;
top:50%;
width:100%;
text-transform:uppercase;
font-weight:bold;
font-family:Helvetica, 'Helvetica Neue', 'Arial Block', Arial;
font-size:9em;
text-align:center;
}
#header span{
font-size:7em;
top:40%;
}

HTML

<body>
<div id='container'>
<div id='fullScreenImage'><span>Full Screen Image</span>
</div>
<div id='content'>
<div id='header'><span>Header</span></div>
<div id='sidebar'>
<span>Sidebar</span>
</div>
<div id='contentArea'><span>Content Area</span></div>
</div>
</div>
</body>

关于html - 技巧网页设计(全屏和非全屏元素),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22161529/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com