Clever Geek Handbook

Customize design to any browser screen size without scrolling

I need to create a website using html, bootstrap, etc. The main criticism is that the scrollbar icon should appear at any size of the browser window. image and stuff must adjust for this. The screen looks like: enter image description here

Please help me.

+3


source to share


4 answers


It is not simple. You should use media queries for heights, account for popular heights, and make items in intermediate height states not overflow your screen. I suggested that you use the following media queries and adjust your elements accordingly for each one:



@media (min-height: 1200px) {
    .banner{ height: 760px; } //example
}

@media (min-height: 1080px) {
    .banner{ height: 600px; } //example
}

@media (min-height: 900px) {
    .banner{ height: 560px; } //example
}

@media (min-height: 800px) {
    .banner{ height: 440px; } //example
}

@media (min-height: 768px) {
    .banner{ height: 400px; } //example
}

@media (min-height: 600px) {
    .banner{ height: 300px; } //example
}
+1


source


In CSS you want to add media queries . as below 

@media tv and (min-width: 700px) and (orientation: landscape) { ...  }


Refferences: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

0


source


You can use relative values ​​for height properties in CSS selectors. For example,

#content {height: 77%;} #footer {height: 22%;}

This will make your containers fit into the window size.

0


source


It is good if you can use percentage sizes.

In this example, I am setting the header to 20% of the height, the container to 60%, and the footer to 20%. So it doesn't matter what height my window is, because it is a percentage of the height.

See example below:

body,html{
  height: 100%;  
}
header{
  background-color: yellow;
  height: 20%;
  width: 100%;
}
#container{
  width: 100%;
  height: 60%;
  background-color: cyan;
}
footer{
  width: 100%;
  height: 20%;
  background-color:red;
}
      

        
        
        
      

    
<header></header>
<div id="container"></div>
<footer></footer>
Run codeHide result


0


source






More articles:


All Articles