Make my webpage autofit / autosize SIMPLE

Question

1.00/5 (1 vote)

See more:

, +

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.

HTML

<!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">&#9001;</span>
    <span class="cycle-next">&#9002;</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>

Posted 17-Dec-15 17:10pm

BladeLogan

Updated 17-Dec-15 17:11pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 17-Dec-15 23:17pm

Auto-fit what? Horizontally of vertically? For horizontal, CSS is enough, but the fit to window height would require a bit of JavaScript.
—SA

BladeLogan 17-Dec-15 23:24pm

Both unfortunately

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-12-17T17:47:00

BladeLogan answered:

Both unfortunately

Well, 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 with margin and padding properties.

To fill in the browser window's height, JavaScript may be needed. You can use the property window.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