Вертикальные полосы прокрутки больше не отображаются, если для переполнения установлено значение auto

Я работаю над сайтом JSP.Вертикальные полосы прокрутки больше не отображаются, если для переполнения установлено значение auto

У меня есть 3 основные концентрические дивы:

"контейнер" (содержит весь сайт)
"содержание" (содержит содержание)
"Результаты" (внутри "содержания", содержит большое количество данных, сгенерированных сервером)

Я создал CSS так, чтобы при большом количестве данных, отложенных в результатах «div», горизонтальные и вертикальные полосы прокрутки появлялись автоматически.

Это сработало.

Пока я добавил эти теги в верхней части страницы, чтобы исправить некоторые другие неродственные проблемы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

Я попробовал предложение во второй ответ ниже, чтобы установить высоту в дивы. Нет радости, даже когда я устанавливаю высоту с px. Мне нужно установить высоту с помощью% s, если это возможно.

Я взял экран, содержащий неприятный JSP, достал все мусор, не связанные с проблемой, и поместил CSS intp head, чтобы упростить отладку проблемы. В приведенной ниже цитате содержится один HTML-файл, который вы можете зайти в браузер и текстовый редактор, чтобы увидеть проблему самостоятельно. Розовый div «results» должен быть примерно таким же высоким, как поле редактирования stackoverflow, при этом появятся горизонтальные и вертикальные полосы прокрутки.

results.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
    <title>Staff Directory</title> 
<style type="text/css"> 
body{background:white;} 
#container 
{ 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
    width: 95%; 
    background: white; 
    font-family:Arial,Helvetica; 
} 



/* Main Content Area **********************************************************/ 
#content 
{ 
    clear: left; 
    padding: 20px; 
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    background:yellow; 
} 

#content h2 
{ 
    color: #000; 
    font-size: 160%; 
    margin: 0 0 .5em; 
} 

.content_center 
{ 
    display: inline-block; 
} 
.content_center td 
{ 
    text-align:left; 
} 


/* horizontal button bar */ 
.button_bar 
{ 
    margin-left:auto; 
    margin-right:auto; 
    margin-top: 2%; 
    margin-bottom: 2%; 
    padding-bottom: 2%; 
    width:100%; 
    height:auto; 
    vertical-align:top; 
} 

/* put a button on the far right of the above button bar */ 
.button_bar_right_button 
{ 
    float:right; 
    margin-left:1%; 
    vertical-align:top; 
} 
/* put a button on the far left of the above button bar */ 
.button_bar_left_button 
{ 
    float:left; 
    margin-left:1%; 
    vertical-align:top; 
} 
/* table field names */ 
#fieldLabel 
{ 
    font-weight:bold; 
} 

/* results.jsp ****************************************************************/ 
#results 
{ 
    overflow:auto; 
    margin-left:auto; 
    margin-right:auto; 
    height:40%; 
    width: 100%; 
    background:pink; 
} 
#results td 
{ 
    white-space: nowrap; 
    font-size:11px; 
    text-align:left; 
} 
#results th 
{ 
    white-space: nowrap; 
    background:silver; 
} 
</style> 
</head> 

    <body> 
    <div id="container"> 
     <!-- Content: Start div content: Main content area --> 
     <div id="content">     
        <h1>Div "Content" </h1> 

     <form id="command" name="f" action="employee" method="post">  
     <div id="results"> 
      <center> 
       <h1>Div "Results"</h1> 
      </center> 


      <table> 
       <tr> 
       <td> 
       Start: A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. A very wide string. The End. 
       </td> 
       </tr> 

      </table> 
      <p> 
      Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh 
      euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim 
      veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
      vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
      facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </p> 
      <p> 
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
      eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
      blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
      facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p> 
      <p> 
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
      consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
      et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
      dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
      adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
      aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
      </p> 
      <p> 
      Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh 
      euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim 
      veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
      vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
      facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </p> 
      <p> 
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
      eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
      blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
      facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p> 
      <p> 
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
      consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
      et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
      dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
      adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
      aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
      </p> 
      <p> 
      Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh 
      euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim 
      veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
      vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
      facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </p> 
      <p> 
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
      eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
      blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
      facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p> 
      <p> 
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
      consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
      et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
      dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
      adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
      aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
      </p> 
      <p> 
      Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh 
      euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim 
      veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip 
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in 
      vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
      facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
      luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
      </p> 
      <p> 
      Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
      lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
      dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
      eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
      blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla 
      facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
      </p> 
      <p> 
      Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
      consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan 
      et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis 
      dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer 
      adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
      aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
      ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
      </p> 



















     </div> <!--END: div id="results" --> 

     <div class="button_bar"> 

      <div class="button_bar_left_button">  
       <input value="Request More Information" name="buttonRequestMoreInformation" type="submit"> 
      </div> 

      <div class="button_bar_left_button">  
       <input value="Start New Search" onclick="location.href='search'" name="buttonSearch" type="button"> 
      </div> 

      <div class="button_bar_right_button"> 
        <input value="Add Member" onclick="document.formAddButton.submit();" name="buttonAddMember" type="button"> 
      </div> 

     </div><!-- end div button_bar --> 
     </form><!-- end form 'f', main form --> 


     <form name="formAddButton" action="initialRequest" method="post"> 
      <input name="NextRequest" value="Add Member" type="hidden"> 
     </form>  

     </div><!-- Content: Close div id ="content" --> 

    </div><!-- end div container --> 

</body> 

</html>

источник

2012-06-13 Steve

Пространства в ваших идентификационных знаках преднамеренно? O_o –

Какие пространства? Я не видел никаких пробелов, хотя это, безусловно, убьет его попытки стирать эти идентификаторы с помощью CSS .... –

Я помещаю пробелы между «=» и другими вещами в тегах div. – Steve

Вы уверены, что вы не пытались сделать, как я сказал? Я просто сбрасывал свой код в браузере, и изменил

#results 
{ 
    height: 40%; 
}

#results 
{ 
    height: 200px; 
}

и розовая коробка вела себя, как я ожидал, и вы хотели.

Об использовании% вместо px: вы не можете, если вы не установили фиксированную высоту контейнера.

источник

2012-06-14 13:49:40 Luca

Я полностью переписал свой вопрос, чтобы улучшить ясность. Я попробовал ваше предложение без кубиков, спасибо в любом случае. – Steve

, поэтому я полностью переписал свой ответ, поскольку, возможно, он был недостаточно ясен, дайте ему уйти - cheers – Luca

Спасибо Luca! Ты помог мне с большой головной болью. На днях я должен уделить время этому классу веб-дизайна, который всегда хотел взять или закончить последнюю треть этой книги CSS. – Steve

div {overflow-x:hidden; } 
div {overflow-x:scroll; } 
div {overflow-x:visible;} 
div {overflow-x:auto;} 
div {overflow-y:hidden; } 
div {overflow-y:scroll; } 
div {overflow-y:visible;} 
div {overflow-y:auto;}

источник

2012-06-13 21:41:54

Зачем вам это делать?Похоже, сумасшедший код нуждается в некотором объяснении. –

жаль моих друзей! Я не понял ваш вопрос. –

Ну, так как ни один из ваших элементов не приписывает высоту, тогда 40% «чего-то» никогда не будут применены.

Итак, чтобы решить вашу ситуацию, вы должны исправить некоторую высоту где-то на родительском разделителе.

Выполнены

источник

2013-01-28 20:22:54

Вертикальные полосы прокрутки больше не отображаются, если для переполнения установлено значение auto

ответ

Смежные вопросы