我的问题是，当我重新调整浏览器窗口大小时，它们不会让用户在水平方向上滚动，而是会消失。正如您所看到的，我有一个名为div的产品列表，我的目的是在它们不适合屏幕时添加滚动条。但是，我仍然希望避免使用整个页面的滚动条。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border: 0px;
overflow-y:hidden;
}
.productList {
overflow-x: scroll;
overflow-y:scroll;
position:fixed;
height:75%;
min-width:3000px;
max-width:5000px;
}
.header
{
height:10%;
border-bottom: 1px groove black;
font-size:100px;
font-family:Verdana;
}
.menu {
width: 800px;
/* border-top-style: groove;*/
/*border-bottom-style: groove;*/
/*border-bottom-color: Black;*/
font-family: Georgia;
border:2px groove black;
border-left:0px;
height:4%;
}
.menuitem {
/*/border-top: 1px groove black;*/
border-bottom: 1px groove black;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 4px;
cursor: pointer;
background-color: White;
color: Black;
font-weight: bold;
}
.menuitem:hover {
/*/border-top: 1px groove black;*/
border-bottom: 1px groove black;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 4px;
cursor: pointer;
background-color: #505050;
color: White;
font-weight: bold;
}
.product
{
display:block;
width:200px;
float:left;
}
.logo {
width: 200px; /*should be the same as product width*/
height: 100px; /*was 100px*/
position: fixed;
background-color: white;
display: block;
/*margin-bottom:100px;*/
}
.logos
{
width:1400px;
}
.search
{
height:11%;
border:1px groove gray;
}
</style>
</head>
<body style="">
<div>
<div class="header">
Header
</div>
<div class="menu">
<div class="menuitem">Home</div>
<div class="menuitem">Home</div>
<div class="menuitem">Home</div>
<div class="menuitem">Home</div>
</div>
<!--should insert the serach bar here -->
<div class="search">Sökfunktioners utrymme. TODO: show/hide funktion
<br />
Sökfält1, etc
</div>
<!--<div class="logos">
<img src="images/hm-logo.png" class="logo"/>
<img src="images/mq-logo.jpg" class="logo" />
<img src="images/kapp-ahl-logo.svg" class="logo" />
<img src="images/dressmann-logo.png" class="logo" />
<img src="images/jack-jones-logo.jpg" class="logo" />
<img src="images/lindex-logo.svg" class="logo" />
<img src="images/brothers-logo.png" class="logo" />
</div>-->
<div class="productList">
<div class="product">
<img src="images/hm-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/hmprod.jpg" width="200" />
<img src="ex/hmprod.jpg" width="200" />
<img src="ex/hmprod.jpg" width="200" />
</div>
<div class="product">
<img src="images/mq-logo.jpg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/jack-jones-logo.jpg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/kapp-ahl-logo.svg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/dressmann-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/jack-jones-logo.jpg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/lindex-logo.svg" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/brothers-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/brothers-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<div class="product">
<img src="images/brothers-logo.png" class="logo" />
<div style="margin-bottom: 100px;"></div>
<img src="ex/fossil-planbok.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
<img src="ex/clock.jpg" width="200" />
</div>
<!-- <div style="clear:both;"></div>-->
</div><div style="clear:both;"></div></div>
</body>
</html>