我首先要说的是,我对整个网络开发非常陌生,这是我的第一个响应式网站,所以请保持温和并牢记这一点,我是现阶段noob这个词的定义.寻找答案一段时间没有运气我希望有人可以帮助我.
我正在尝试为这个网站制作一个主页.设计只是页面左侧的一个块,显示顶部的徽标,然后是下面的一系列链接,所有链接都在同一背景上.在右边是一个填满屏幕其余部分的大图像.我希望整个页面填满浏览器窗口中的任何设备,因此绝对不需要滚动,即宽度和高度都是视口的100%.页面的宽度完全没有让我感到悲伤,可以根据需要随意调整到不同的屏幕尺寸,侧边栏宽度为20%,主图像为80%.
然而,高度是另一回事.我似乎无法在目前为止尝试过的CSS的任何组合中,能够使高度在视口的100%处理.侧边栏太短,主图像太长或两者都太长等等.主图像我想保持纵横比,只是让它溢出它的div,以保持大部分显示和侧面吧我只是想要适应100%的页面高度.这是我目前的代码:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg …