我将开始说我对整个网络开发非常新鲜,这是我第一个响应敏捷的网站,所以请温柔地记住这一点,我在这个阶段就是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,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>
任何对此的帮助将非常感激,并且毫不犹豫地指出任何大规模的业余错误.我愿意接受任何批评,并从中学习.谢谢
解决方法
我已经使你成为一个基本的设置,以显示你如何风格这样.我发现将高度设置为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％.
我也建议把这个导航变成一个我包含在小提琴里的,以显示怎么可能的.
您需要研究的另一件事是媒体查询来调整内容以更好地适应移动设备.在移动设备上考虑将sideBar更改为水平导航.
如果你想要一个纯CSS唯一的方法,那么你可以做这样的事情,
html,body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
通过在html / body中添加100％的高度和宽度,您可以使用其他元素的height：100％填充整个页面.
参考这个JSFIDDLE看看它是如何工作的.
