Fix height to screen issue.

[Hazukiy]

Hi, I'm trying to make it so that my Wrapper fixes to the screen resolution depending on your screen, so I'm basically debugging on both my laptop and my 32"" monitor.

 

Would they be any possible way to make it so:

 

"height: 100%"

"width: 100%"

 

If so how would I do this method? I've got this far atm:

(The wrapper is help inside the main Container which just has 

 

"width: 100%;

min-width: 100%;

padding: 0;

margin: 0; "

 

Excuse my sloppy coding.

 

.index_wrapper {
	width: 100%;
	height: 1600px;
	min-width: 500px;
	max-width: 100%;
	min-height: 500px;
	max-height: 1600px;
	margin-top: 50px;
	margin-bottom: 25px;
	margin-right: auto;
	margin-left: auto;
}

.index_content {
	background-color: #1e1f1f;
	background-image:url('images/structure/background-2.jpg');
	background-repeat: no-repeat;
	height: 100%;
	min-height: 100%;
	width: 100%;
	min-width: 1452px;
	border: 1px solid #505050;
	border-left:none;
	border-right:none;
	border-top: none;
	vertical-align: baseline;
}

 

 

[haku]

What are you trying to do?

[Hazukiy]

What are you trying to do?

 

"I'm trying to make it so that my Wrapper fixes to the screen resolution"

[haku]

I suppose you thought that answer made things clearer. But all you did was tell us again how you are trying to do whatever it is that you are trying to do, not what it is you are trying to do.

Edited March 27, 2013 by haku

[Libellula]

So you want to make your website responsive, correct? Depending on what size monitor or device you are on, you want your content to size up or size down to fit that size of screen? Makes sense. The ability to do this is going to depend on your content. How do you have your website coded? Are you using HTML5? Is your content in tables or within DIV tags or another format? If you have this site online, maybe you could provide a url and we can look at it. Using the coding you are trying to use, it probably won't work. I am assuming you have a conflict between "space needed" and "space provided", so it is just defaulting to "space needed". If you have your wrapper set up correctly, this might work.

 

.wrapper {
  margin: 0 auto;
  width: 940px;
  position: relative;
}

Change the width to what your site looks best in originally.

Edited March 28, 2013 by Libellula