php - Horizontal and Vertical Scrollbars missing

Question

Welcome To Ask or Share your Answers For Others

php - Horizontal and Vertical Scrollbars missing

asked Oct 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

php - Horizontal and Vertical Scrollbars missing

I was working on the code of this html/php page and all of a sudden my scrollbars are missing.
I need them because the page has to show the results of a query in a table and there are a lot of columns.
. I was wondering if maybe the error could be in the css file. Here's the code:

I think I have put every design modification in the css file, so it should be here the issue.

label {
    display: block;
    margin: 5px 0;
}

header {
    padding-top: 100px;
    padding-bottom: 100px;
    height: 50px;
    text-align: center;;
}

my_table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

my_table td, my_table th {
              border: 1px solid #ddd;
              padding: 8px;
}

my_table tr:nth-child(even){
    background-color: #CC0000;
}

my_table tr:hover {
    background-color: #ddd;
}

my_table th {
              padding-top: 12px;
              padding-bottom: 12px;
              text-align: left;
              background-color: #CC0000;
              color: white;
}

body,h1,h2,h3,h4,h5 {
    font-family: "Raleway", sans-serif;
    overflow: auto;
}

.container {
  height: 300px;
  position: relative;
}

.container2 {
  height: 1400px;
  position: relative;
}

.container3 {
  height: 130px;
  position: relative;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

button {
  display:block;
  width: 120px;
  height: 60px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font color: black;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: white; 
  color: black; 
  border: 2px solid #CC0000;
}

a {
    text-decoration:none;
    display: block;
}

button:hover {
  background-color: #CC0000 ;
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

header-img {
  width: 100%;
  height: 400px;
  background: url('C:xampphtdocspdopublicemplatesLGP_logo_18.jpg');
  background-size: cover;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    padding: 5px;
    border-bottom: 1px solid #aaa;
}

question from:https://stackoverflow.com/questions/66047483/horizontal-and-vertical-scrollbars-missing

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-06T03:16:31+0000

you miss overflow: scroll; css property and it will work with specific width and height

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: #eee;
width: 100%;
height: 100px;
border: 1px dotted black;
overflow: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is 
added to scroll inside the box. Note that this will add a scrollbar both horizontally 
and vertically (even if you do not need it):</p>

<div>You can use the overflow property when you want to have better control of the 
layout. The overflow property specifies what happens if content overflows an element's 
box. You can use the overflow property when you want to have better control of the 
layout. The overflow property specifies what happens if content overflows an element's 
box. You can use the overflow property when you want to have better control of the 
layout. The overflow property specifies what happens if content overflows an element's 
box. You can use the overflow property when you want to have better control of the 
layout. The 
overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. 
overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. 
overflow property specifies what happens if content overflows an element's box.
You can use the overflow property when you want to have better control of the layout. 
The overflow property specifies what happens if content overflows an element's box. 
</div>

</body>
</html>

so in the above example vertical scroll will work as text overcomes from the specified height and if I reduce the with and the text with overcomes from the specified with then horizontal scroll will works hope you understand the above example and description

Categories

php - Horizontal and Vertical Scrollbars missing

php - Horizontal and Vertical Scrollbars missing

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags