让我的网页自动调整/自动调整SIMPLE [英] Make my webpage autofit / autosize SIMPLE
问题描述
所以我刚刚完成了我的第一个JQuery项目，它是一个简单的全宽度滑块。 （回到HTML& CSS& im目前正在使用C＃）
这是问题所在;我不希望能够在页面上滚动我希望它自动调整到网页。
让我说我现在打开网页，我想调整它的大小我怎么想要它的响应&它的工作就像一个魅力。但你仍然可以向下滚动。 （随意用我的代码自己尝试）
我记得这很容易修复但是出于某种原因我不记得我是怎么回事的。我很确定我必须改变高度的东西;它在CSS文件中或HTML源代码体内。
我的CSS文件很空。
< ！DOCTYPE html >
< html >
< head >
< meta charset = UTF-8 >
< meta name = viewport content = width =设备宽度，initial-scale = 1 >
< title > 全宽度响应图片滑块< / title >
< script < span class =code-attribute> src = http://ajax.googleapis.com/ ajax / libs / jquery / 1 / jquery.min.js > < / script >
< script src = http://malsup.github.com/jquery.cycle2.js\"> < / script >
< style 类型 = text / css >
* { padding ： 0; margin ： 0; }
body { font-family ： Sans-Serif; }
img { max-width ： 100％; }
。 cycle-slideshow {
width ： 100％;
display ： block;
position ： relative;
margin ： 0 auto;
}
。 cycle-prev ,. cycle-next {
font-size ： 200;
颜色 ： #FFF;
display ： block;
position ： 绝对值;
top ： 50％;
margin-top ： -16px;
z-index ： 9999;
cursor ： 指针;
}
。 cycle-prev { left ： 10％; }
。 cycle-next { right ： < span class =code-keyword> 10％; }
。 cycle-pager {
width ： 100％;
text-align ： center;
显示 ： block;
位置 ： 绝对;
位置 ： top;
底部 ： 20px;
z-index ： 9999;
}
。 cycle-pager span {
text-indent ： 100％;
white-space ： nowrap; ;
width ： 12px;
height ： 12px;
display ： inline-block;
border ： 1px solid #FFF ;
border-radius ： 50％;
margin ： 0 10px;
cursor ： 指针;
}
。 cycle-pager 。 cycle-pager-active { background ： #FFF; }
< / style >
< / head >
< body >
< div class = container >
<！ - 全宽响应Sl ider - >
< div class = cycle-slideshow >
< span class =code-keyword>< span class = cycle-prev > &＃9001; < / span >
< span class = cycle-next > &＃9002; < < span class =code-leadattribute> / span >
< span class = cycle-pager > < / span >
< img src = images / Untitled.png >
< img src = images / wp.png >
< < span class =code-leadattribute> img src = images / wp2.png >
< span class =code-keyword>< / div >
<！ - 全宽度响应滑块 - >
< / body >
< / html >
BladeLogan回答：
不幸的是嗯，这不是一个大问题。非常简单：水平填充只能使用CSS属性完成，例如
width：100％（仅举例），与margin <组合/ code>和padding属性。
要填写浏览器窗口的高度，JavaScript可能是需要。您可以使用属性window.innerHeight：
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight [ ^ ]。
您可以在CodeProject上发布的两个应用程序中找到完全符合可用浏览器窗口大小的布局样本（当然，只有当这个窗口不是很小时才有效）：
< a href =http://www.codeproject.com/Articles/876475/Tetris-on-Canvas>画布上的俄罗斯方块 [ ^ ]，
JavaScript计算器 [ ^ ]。
它很容易运行然后看看一切是如何工作的：布局功能很好地封装和隔离剩下的功能;这两个应用程序都可以在浏览器中本地执行，并且根本不需要服务部分或任何HTTP服务器。
-SA
So I just got done making my first JQuery project which is a simple full width slider. (Getting back to HTML & CSS & im currently working in C#)
Here is the issue; I dont want to be able to scroll on the page I want it to be autofit to the webpage.
Lets say I open the webpage right now, I want resize it how ever I want its responsive & its working like a charm. but you can still scroll down. (Feel free to try it yourself with my code)
I remember this being really simple to fix but for some reason I cant remember how I did it back in the day. I'm pretty sure I will have to change something with the height; it in the CSS file or inside the body of the HTML source.
My CSS file is competly empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;}
body {font-family: Sans-Serif;}
img {max-width: 100%;}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -16px;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next{right: 10%;}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
position: top;
bottom: 20px;
z-index: 9999;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
cursor: pointer;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
</style>
</head>
<body>
<div class="container">
<!-- Full Width Responsive Slider -->
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
<!-- Full Width Responsive Slider -->
</body>
</html>BladeLogan answered:
Both unfortunatelyWell, this is not a big problem. Very briefly: horizontal fill-in can be done with CSS properties only, like
width: 100%(just an example), in combination withmarginandpaddingproperties.
To fill in the browser window's height, JavaScript may be needed. You can use the propertywindow.innerHeight:
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight[^].
You can find complete samples of layouts precisely fitting in available browser window's size (which works, of course, only when this window is not extremely small), in two my applications published on CodeProject:
Tetris on Canvas[^],
JavaScript Calculator[^].
It's easy to run then and see how everything works: the layout functionality is well encapsulated and isolated from the rest of functionality; both applications can be executed locally in a browser and don't require service part or any HTTP server at all.
—SA
这篇关于让我的网页自动调整/自动调整SIMPLE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
