Setting page height to Scroll - when outer div to hidden

Setting page height to Scroll - when outer div to hidden - inner div to scroll

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I have a div, which contains tab pane's. The first tab pane contains two inner div's.
The first inner div has a search text box, which I want to retain in a fixed position, while I want the second inner div to have the scroll enabled. A workable code is as follows:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

    <!-- View meta tag -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>



    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />



<style type="text/css">



body, html {

  height: 100%;

  min-height: 100%;

  font-size: 100%

  }



html, body {overflow:hidden;}



body {

  padding-bottom: 16%;

}



.navbar {

  margin-bottom: 0;



}

.container {

  width:100%;

  height:100%;

}



.sidebar {

  width:25%;

  float:left;

  height:100%;

  border-right: solid 0.150em #f1ded9;

  overflow-x: auto; 

}



.center {

  background-color: white;

  float:left;

  border-right: solid 0.150em #f1ded9;

  width:55%;

  height:100%;

}



.rhsbar {

  background-color: white;

  float:left;

  margin:0 0 0 0;

  position:relative;

  width:20%;

  height:100%;

  border-left: solid 0.278em #f1ded9;

  overflow: auto;

}



#loaded_img_panel {

  border-top: solid 0.278em #f1ded9;

  display:flex;

  flex-wrap: nowrap;

  overflow-x:auto;

  padding: 0.556em 0 0 0;



}



.rhsbar .tab {

    overflow-y: auto;

    border: 0.056em solid #ccc;

    background-color: #f1f1f1;

}



</style>



</head>



<body>

 <nav class="navbar navbar-default">

  <div class="container-fluid">

  </div>

</nav>



<div class="container">

  <div class="sidebar">

  </div>



<div id="center" class="center">

  <canvas id="imagecanvas" style="position:absolute;margin:0 0 0 0;z-index:1"></canvas>

  <canvas id="regncanvas" tabindex='1' style="position:absolute;margin:0 0 0 0;z-index:2"></canvas>

</div>



<div class="rhsbar" style="overflow:hidden;display:flex;flex-direction:column;">

  <div class="row" >

            <div class="col-md-12">

            <div class="card">

            <ul class="nav nav-tabs" role="tablist" id="annTabs">

                <li role="presentation"  style="font-size:80%" class="active"><a href="#annTree" aria-controls="annTree" role="tab" data-toggle="tab" >Ann</a></li>

                <li role="presentation" style="font-size:80%"><a href="#batchProcess"  aria-controls="batchProcess" role="tab" data-toggle="tab">Bat</a></li>

            </ul>

            <div class="tab-content">

                <div role="tabpanel" class="tab-pane active"  id="annTree">

                  <input id="annDirSearch" type="text" placeholder="Search">

                  <div id="annotateDirectories" style="flex:1;overflow-y:scroll; max-height:520px;" >

                    <ul>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>



                    </ul>

                  </div>

                </div>

                <div role="tabpanel" class="tab-pane" id="batchProcess" style="overflow-y:scroll; max-height:540px;">

                </div>

            </div>

        </div>

    </div>

</div>

</div>

</div>



<div id="loaded_img_panel" name="loaded_img_panel" class="loaded_img_panel">             

</div>



</body>

</html>

This works. However, since the second inner div is set to 520px (suitable to my laptop), when I open the page on a larger screen, the scroll window's height looks small on a smaller screen, I am not able to scroll.

I tried setting the height of the second inner div to 100%, 100vh, flex with direction as column. None of them helped.

asked Nov 22 '18 at 8:50

Apricot

1,00611134

add a comment |

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

    <!-- View meta tag -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>



    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />



<style type="text/css">



body, html {

  height: 100%;

  min-height: 100%;

  font-size: 100%

  }



html, body {overflow:hidden;}



body {

  padding-bottom: 16%;

}



.navbar {

  margin-bottom: 0;



}

.container {

  width:100%;

  height:100%;

}



.sidebar {

  width:25%;

  float:left;

  height:100%;

  border-right: solid 0.150em #f1ded9;

  overflow-x: auto; 

}



.center {

  background-color: white;

  float:left;

  border-right: solid 0.150em #f1ded9;

  width:55%;

  height:100%;

}



.rhsbar {

  background-color: white;

  float:left;

  margin:0 0 0 0;

  position:relative;

  width:20%;

  height:100%;

  border-left: solid 0.278em #f1ded9;

  overflow: auto;

}



#loaded_img_panel {

  border-top: solid 0.278em #f1ded9;

  display:flex;

  flex-wrap: nowrap;

  overflow-x:auto;

  padding: 0.556em 0 0 0;



}



.rhsbar .tab {

    overflow-y: auto;

    border: 0.056em solid #ccc;

    background-color: #f1f1f1;

}



</style>



</head>



<body>

 <nav class="navbar navbar-default">

  <div class="container-fluid">

  </div>

</nav>



<div class="container">

  <div class="sidebar">

  </div>



<div id="center" class="center">

  <canvas id="imagecanvas" style="position:absolute;margin:0 0 0 0;z-index:1"></canvas>

  <canvas id="regncanvas" tabindex='1' style="position:absolute;margin:0 0 0 0;z-index:2"></canvas>

</div>



<div class="rhsbar" style="overflow:hidden;display:flex;flex-direction:column;">

  <div class="row" >

            <div class="col-md-12">

            <div class="card">

            <ul class="nav nav-tabs" role="tablist" id="annTabs">

                <li role="presentation"  style="font-size:80%" class="active"><a href="#annTree" aria-controls="annTree" role="tab" data-toggle="tab" >Ann</a></li>

                <li role="presentation" style="font-size:80%"><a href="#batchProcess"  aria-controls="batchProcess" role="tab" data-toggle="tab">Bat</a></li>

            </ul>

            <div class="tab-content">

                <div role="tabpanel" class="tab-pane active"  id="annTree">

                  <input id="annDirSearch" type="text" placeholder="Search">

                  <div id="annotateDirectories" style="flex:1;overflow-y:scroll; max-height:520px;" >

                    <ul>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>



                    </ul>

                  </div>

                </div>

                <div role="tabpanel" class="tab-pane" id="batchProcess" style="overflow-y:scroll; max-height:540px;">

                </div>

            </div>

        </div>

    </div>

</div>

</div>

</div>



<div id="loaded_img_panel" name="loaded_img_panel" class="loaded_img_panel">             

</div>



</body>

</html>

I tried setting the height of the second inner div to 100%, 100vh, flex with direction as column. None of them helped.

asked Nov 22 '18 at 8:50

Apricot

1,00611134

add a comment |

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

    <!-- View meta tag -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>



    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />



<style type="text/css">



body, html {

  height: 100%;

  min-height: 100%;

  font-size: 100%

  }



html, body {overflow:hidden;}



body {

  padding-bottom: 16%;

}



.navbar {

  margin-bottom: 0;



}

.container {

  width:100%;

  height:100%;

}



.sidebar {

  width:25%;

  float:left;

  height:100%;

  border-right: solid 0.150em #f1ded9;

  overflow-x: auto; 

}



.center {

  background-color: white;

  float:left;

  border-right: solid 0.150em #f1ded9;

  width:55%;

  height:100%;

}



.rhsbar {

  background-color: white;

  float:left;

  margin:0 0 0 0;

  position:relative;

  width:20%;

  height:100%;

  border-left: solid 0.278em #f1ded9;

  overflow: auto;

}



#loaded_img_panel {

  border-top: solid 0.278em #f1ded9;

  display:flex;

  flex-wrap: nowrap;

  overflow-x:auto;

  padding: 0.556em 0 0 0;



}



.rhsbar .tab {

    overflow-y: auto;

    border: 0.056em solid #ccc;

    background-color: #f1f1f1;

}



</style>



</head>



<body>

 <nav class="navbar navbar-default">

  <div class="container-fluid">

  </div>

</nav>



<div class="container">

  <div class="sidebar">

  </div>



<div id="center" class="center">

  <canvas id="imagecanvas" style="position:absolute;margin:0 0 0 0;z-index:1"></canvas>

  <canvas id="regncanvas" tabindex='1' style="position:absolute;margin:0 0 0 0;z-index:2"></canvas>

</div>



<div class="rhsbar" style="overflow:hidden;display:flex;flex-direction:column;">

  <div class="row" >

            <div class="col-md-12">

            <div class="card">

            <ul class="nav nav-tabs" role="tablist" id="annTabs">

                <li role="presentation"  style="font-size:80%" class="active"><a href="#annTree" aria-controls="annTree" role="tab" data-toggle="tab" >Ann</a></li>

                <li role="presentation" style="font-size:80%"><a href="#batchProcess"  aria-controls="batchProcess" role="tab" data-toggle="tab">Bat</a></li>

            </ul>

            <div class="tab-content">

                <div role="tabpanel" class="tab-pane active"  id="annTree">

                  <input id="annDirSearch" type="text" placeholder="Search">

                  <div id="annotateDirectories" style="flex:1;overflow-y:scroll; max-height:520px;" >

                    <ul>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>



                    </ul>

                  </div>

                </div>

                <div role="tabpanel" class="tab-pane" id="batchProcess" style="overflow-y:scroll; max-height:540px;">

                </div>

            </div>

        </div>

    </div>

</div>

</div>

</div>



<div id="loaded_img_panel" name="loaded_img_panel" class="loaded_img_panel">             

</div>



</body>

</html>

I tried setting the height of the second inner div to 100%, 100vh, flex with direction as column. None of them helped.

asked Nov 22 '18 at 8:50

Apricot

1,00611134

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

    <!-- View meta tag -->

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title></title>



    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>    

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />



<style type="text/css">



body, html {

  height: 100%;

  min-height: 100%;

  font-size: 100%

  }



html, body {overflow:hidden;}



body {

  padding-bottom: 16%;

}



.navbar {

  margin-bottom: 0;



}

.container {

  width:100%;

  height:100%;

}



.sidebar {

  width:25%;

  float:left;

  height:100%;

  border-right: solid 0.150em #f1ded9;

  overflow-x: auto; 

}



.center {

  background-color: white;

  float:left;

  border-right: solid 0.150em #f1ded9;

  width:55%;

  height:100%;

}



.rhsbar {

  background-color: white;

  float:left;

  margin:0 0 0 0;

  position:relative;

  width:20%;

  height:100%;

  border-left: solid 0.278em #f1ded9;

  overflow: auto;

}



#loaded_img_panel {

  border-top: solid 0.278em #f1ded9;

  display:flex;

  flex-wrap: nowrap;

  overflow-x:auto;

  padding: 0.556em 0 0 0;



}



.rhsbar .tab {

    overflow-y: auto;

    border: 0.056em solid #ccc;

    background-color: #f1f1f1;

}



</style>



</head>



<body>

 <nav class="navbar navbar-default">

  <div class="container-fluid">

  </div>

</nav>



<div class="container">

  <div class="sidebar">

  </div>



<div id="center" class="center">

  <canvas id="imagecanvas" style="position:absolute;margin:0 0 0 0;z-index:1"></canvas>

  <canvas id="regncanvas" tabindex='1' style="position:absolute;margin:0 0 0 0;z-index:2"></canvas>

</div>



<div class="rhsbar" style="overflow:hidden;display:flex;flex-direction:column;">

  <div class="row" >

            <div class="col-md-12">

            <div class="card">

            <ul class="nav nav-tabs" role="tablist" id="annTabs">

                <li role="presentation"  style="font-size:80%" class="active"><a href="#annTree" aria-controls="annTree" role="tab" data-toggle="tab" >Ann</a></li>

                <li role="presentation" style="font-size:80%"><a href="#batchProcess"  aria-controls="batchProcess" role="tab" data-toggle="tab">Bat</a></li>

            </ul>

            <div class="tab-content">

                <div role="tabpanel" class="tab-pane active"  id="annTree">

                  <input id="annDirSearch" type="text" placeholder="Search">

                  <div id="annotateDirectories" style="flex:1;overflow-y:scroll; max-height:520px;" >

                    <ul>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>

                      <li>Test1</li>

                      <li>Test2</li>

                      <li>Test3</li>

                      <li>Test4</li>

                      <li>Test5</li>

                      <li>Test6</li>

                      <li>Test7</li>

                      <li>Test8</li>

                      <li>Test9</li>



                    </ul>

                  </div>

                </div>

                <div role="tabpanel" class="tab-pane" id="batchProcess" style="overflow-y:scroll; max-height:540px;">

                </div>

            </div>

        </div>

    </div>

</div>

</div>

</div>



<div id="loaded_img_panel" name="loaded_img_panel" class="loaded_img_panel">             

</div>



</body>

</html>

I tried setting the height of the second inner div to 100%, 100vh, flex with direction as column. None of them helped.

html css

asked Nov 22 '18 at 8:50

Apricot

1,00611134

asked Nov 22 '18 at 8:50

Apricot

1,00611134

asked Nov 22 '18 at 8:50

Apricot

1,00611134

asked Nov 22 '18 at 8:50

Apricot

1,00611134

asked Nov 22 '18 at 8:50

Apricot

1,00611134

add a comment |

2 Answers
2

active

oldest

votes

To set the dimensions to fit different screen size, you have to use @media rules.
Refer to this page to know what they are: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

answered Nov 22 '18 at 8:59

Luca Antonelli

168116

add a comment |

try specifying the device height as well in your meta tag:

this:

<meta name="viewport" content="width=device-width, initial-scale=1">

becomes this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">



.sidebar {

  /* height:100%; - remove */

     min-height:100vh; /* - add */

}

answered Nov 22 '18 at 9:00

Carol McKay

1,9011711

Thank you. I tried your suggestion...it didn't work. By setting the min-height of sidebar to 100vh, it actually moved the bottom panel to the right side.

– Apricot
Nov 22 '18 at 9:12

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53427012%2fsetting-page-height-to-scroll-when-outer-div-to-hidden-inner-div-to-scroll%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

To set the dimensions to fit different screen size, you have to use @media rules.
Refer to this page to know what they are: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

answered Nov 22 '18 at 8:59

Luca Antonelli

168116

add a comment |

To set the dimensions to fit different screen size, you have to use @media rules.
Refer to this page to know what they are: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

answered Nov 22 '18 at 8:59

Luca Antonelli

168116

add a comment |

To set the dimensions to fit different screen size, you have to use @media rules.
Refer to this page to know what they are: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

answered Nov 22 '18 at 8:59

Luca Antonelli

168116

To set the dimensions to fit different screen size, you have to use @media rules.
Refer to this page to know what they are: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

answered Nov 22 '18 at 8:59

Luca Antonelli

168116

answered Nov 22 '18 at 8:59

Luca Antonelli

168116

answered Nov 22 '18 at 8:59

Luca Antonelli

168116

answered Nov 22 '18 at 8:59

Luca Antonelli

168116

add a comment |

try specifying the device height as well in your meta tag:

this:

<meta name="viewport" content="width=device-width, initial-scale=1">

becomes this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">



.sidebar {

  /* height:100%; - remove */

     min-height:100vh; /* - add */

}

answered Nov 22 '18 at 9:00

Carol McKay

1,9011711

Thank you. I tried your suggestion...it didn't work. By setting the min-height of sidebar to 100vh, it actually moved the bottom panel to the right side.

– Apricot
Nov 22 '18 at 9:12

add a comment |

try specifying the device height as well in your meta tag:

this:

<meta name="viewport" content="width=device-width, initial-scale=1">

becomes this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">



.sidebar {

  /* height:100%; - remove */

     min-height:100vh; /* - add */

}

answered Nov 22 '18 at 9:00

Carol McKay

1,9011711

Thank you. I tried your suggestion...it didn't work. By setting the min-height of sidebar to 100vh, it actually moved the bottom panel to the right side.

– Apricot
Nov 22 '18 at 9:12

add a comment |

try specifying the device height as well in your meta tag:

this:

<meta name="viewport" content="width=device-width, initial-scale=1">

becomes this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">



.sidebar {

  /* height:100%; - remove */

     min-height:100vh; /* - add */

}

answered Nov 22 '18 at 9:00

Carol McKay

1,9011711

try specifying the device height as well in your meta tag:

this:

<meta name="viewport" content="width=device-width, initial-scale=1">

becomes this:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">



.sidebar {

  /* height:100%; - remove */

     min-height:100vh; /* - add */

}

answered Nov 22 '18 at 9:00

Carol McKay

1,9011711

answered Nov 22 '18 at 9:00

Carol McKay

1,9011711

answered Nov 22 '18 at 9:00

Carol McKay

1,9011711

answered Nov 22 '18 at 9:00

Carol McKay

1,9011711

Thank you. I tried your suggestion...it didn't work. By setting the min-height of sidebar to 100vh, it actually moved the bottom panel to the right side.

– Apricot
Nov 22 '18 at 9:12

add a comment |

Thank you. I tried your suggestion...it didn't work. By setting the min-height of sidebar to 100vh, it actually moved the bottom panel to the right side.

– Apricot
Nov 22 '18 at 9:12

Thank you. I tried your suggestion...it didn't work. By setting the min-height of sidebar to 100vh, it actually moved the bottom panel to the right side.

– Apricot
Nov 22 '18 at 9:12

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk