Dan*_*Dan 23 css height html5 css3
我首先要说的是,我对整个网络开发非常陌生,这是我的第一个响应式网站,所以请保持温和并牢记这一点,我是现阶段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
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
@font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
对此有任何帮助将非常感激,并毫不犹豫地指出任何大规模的业余错误.我愿意接受批评并从中吸取教训.谢谢
Foa*_*ebi 47
这里只是HTML的简化代码示例:
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
这是使用vh的CSS:
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
从这里:http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
这个对我有用.
Jos*_*ell 20
我已经为你做了一个基本的设置来展示你如何设计这个风格.我发现将高度设置为100%的最佳方法是使用jQuery/Javascript.您可以找到窗口的高度,然后使用它将其输入到css中.
它的工作方式var wH = $(window).height();是找到高度并将其转换为数字.然后当你使用时,你$('.sideBar').css({height: wH});将高度输入sideBar的css.
jQuery的
function windowH() {
var wH = $(window).height();
$('.sideBar, .mainImg').css({height: wH});
}
windowH();
我写的这个函数给这两个元素提供了窗口的高度.这将允许这两个元素是任何浏览器窗口的100%.
我还建议将其nav转换为ul我在小提琴中包含的内容,以显示这是可能的.
JSFIDDLE(删除url末尾的"show"以查看代码)
您需要研究的下一件事是media queries调整内容以更好地适应移动设备.考虑在移动设备上将sideBar更改为水平导航.
如果你想要一个纯粹的CSS方法,那么你可以做这样的事情,
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
通过在html/中添加高度和宽度为100%,您body可以使用height: 100%其他元素填充整个页面.
请参阅此JSFIDDLE以了解它是如何工作的.