Как я могу заставить содержать HTML-ответ, который может быть любым?

ProgramBox

Как я могу заставить содержать HTML-ответ, который может быть любым?

Post author:admin
Запись опубликована:13 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

В моем приложении есть экран, который я могу использовать для проверки тел ответов из вызовов API. Введя URL-адрес и нажав кнопку Выполнить, тело HTML-ответа появится внутри DIV, как на веб-странице.

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

 <div style="height: 40rem; width: 70rem; overflow: auto;"> HTML Page here </div>

 <div style="height: 40rem; width: 70rem; overflow: scroll;"> HTML Page here </div>

Это не содержит содержимого <div>

Как я могу сделать так, чтобы содержимое my <div> полностью содержалось и отображалось с полосами прокрутки? Обратите внимание, что я не ищу решение jQuery.

Обратите внимание, что каждая страница, возвращающаяся с сервера, автоматически добавляет на страницу следующий стиль. Это стандартный стиль, который будет отображаться на каждом ASP.NET страница с ошибкой.

Теперь мне интересно, было бы ли решением переопределить что-нибудь здесь или есть какие-то части стиля, которые я должен каким-то образом удалить:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>IIS 8.0 Detailed Error - 404.0 - Not Found</title> 
<style type="text/css"> 
<!-- 
body{margin:0;font-size:.7em;font-family:Verdana,Arial,Helvetica,sans-serif;} 
code{margin:0;color:#006600;font-size:1.1em;font-weight:bold;} 
.config_source code{font-size:.8em;color:#000000;} 
pre{margin:0;font-size:1.4em;word-wrap:break-word;} 
ul,ol{margin:10px 0 10px 5px;} 
ul.first,ol.first{margin-top:5px;} 
fieldset{padding:0 15px 10px 15px;word-break:break-all;} 
.summary-container fieldset{padding-bottom:5px;margin-top:4px;} 
legend.no-expand-all{padding:2px 15px 4px 10px;margin:0 0 0 -12px;} 
legend{color:#333333;;margin:4px 0 8px -12px;_margin-top:0px; 
font-weight:bold;font-size:1em;} 
a:link,a:visited{color:#007EFF;font-weight:bold;} 
a:hover{text-decoration:none;} 
h1{font-size:2.4em;margin:0;color:#FFF;} 
h2{font-size:1.7em;margin:0;color:#CC0000;} 
h3{font-size:1.4em;margin:10px 0 0 0;color:#CC0000;} 
h4{font-size:1.2em;margin:10px 0 5px 0; 
}#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:"trebuchet MS",Verdana,sans-serif; 
 color:#FFF;background-color:#5C87B2; 
}#content{margin:0 0 0 2%;position:relative;} 
.summary-container,.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;} 
.content-container p{margin:0 0 10px 0; 
}#details-left{width:35%;float:left;margin-right:2%; 
}#details-right{width:63%;float:left;overflow:hidden; 
}#server_version{width:96%;_height:1px;min-height:1px;margin:0 0 5px 0;padding:11px 2% 8px 2%;color:#FFFFFF; 
 background-color:#5A7FA5;border-bottom:1px solid #C1CFDD;border-top:1px solid #4A6C8E;font-weight:normal; 
 font-size:1em;color:#FFF;text-align:right; 
}#server_version p{margin:5px 0;} 
table{margin:4px 0 4px 0;width:100%;border:none;} 
td,th{vertical-align:top;padding:3px 0;text-align:left;font-weight:normal;border:none;} 
th{width:30%;text-align:right;padding-right:2%;font-weight:bold;} 
thead th{background-color:#ebebeb;width:25%; 
}#details-right th{width:20%;} 
table tr.alt td,table tr.alt th{} 
.highlight-code{color:#CC0000;font-weight:bold;font-style:italic;} 
.clear{clear:both;} 
.preferred{padding:0 5px 2px 5px;font-weight:normal;background:#006633;color:#FFF;font-size:.8em;} 
--> 
</style> 

</head> 
<body> 
<div id="content"> 
<div class="content-container"> 
  <h3>HTTP Error 404.0 - Not Found</h3> 
  <h4>The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.</h4> 
</div> 
<div class="content-container"> 
 <fieldset><h4>Most likely causes:</h4> 
  <ul>  <li>The directory or file specified does not exist on the Web server.</li>  <li>The URL contains a typographical error.</li>    <li>A custom filter or module, such as URLScan, restricts access to the file.</li> </ul> 
 </fieldset> 
</div> 
<div class="content-container"> 
 <fieldset><h4>Things you can try:</h4> 
  <ul>  <li>Create the content on the Web server.</li>  <li>Review the browser URL.</li>    <li>Check the failed request tracing log and see which module is calling SetStatus. For more information, click <a href="http://go.microsoft.com/fwlink/?LinkID=66439">here</a>. </li> </ul> 
 </fieldset> 
</div> 

<div class="content-container"> 
 <fieldset><h4>Detailed Error Information:</h4> 
  <div id="details-left"> 
   <table border="0" cellpadding="0" cellspacing="0"> 
    <tr class="alt"><th>Module</th><td>amp;nbsp;amp;nbsp;amp;nbsp;IIS Web Core</td></tr> 
    <tr><th>Notification</th><td>amp;nbsp;amp;nbsp;amp;nbsp;MapRequestHandler</td></tr> 
    <tr class="alt"><th>Handler</th><td>amp;nbsp;amp;nbsp;amp;nbsp;StaticFile</td></tr> 
    <tr><th>Error Code</th><td>amp;nbsp;amp;nbsp;amp;nbsp;0x80070002</td></tr> 

   </table> 
  </div> 
  <div id="details-right"> 
   <table border="0" cellpadding="0" cellspacing="0"> 
    <tr class="alt"><th>Requested URL</th><td>amp;nbsp;amp;nbsp;amp;nbsp;http://127.0.0.1:17315/api/test</td></tr> 
    <tr><th>Physical Path</th><td>amp;nbsp;amp;nbsp;amp;nbsp;C:KWebRole1apitest</td></tr> 
    <tr class="alt"><th>Logon Method</th><td>amp;nbsp;amp;nbsp;amp;nbsp;Anonymous</td></tr> 
    <tr><th>Logon User</th><td>amp;nbsp;amp;nbsp;amp;nbsp;Anonymous</td></tr> 
    <tr class="alt"><th>Request Tracing Directory</th><td>amp;nbsp;amp;nbsp;amp;nbsp;C:UsersRichardAppDataLocaldftmpResourcesc841e747-89a0-46a2-87fc-450674d1b67bdirectoryDiagnosticStoreFailedReqLogFilesWebDEPLOYMENT23(430).WEBROLE1_IN_0_WEB</td></tr> 
   </table> 
   <div class="clear"></div> 
  </div> 
 </fieldset> 
</div> 

<div class="content-container"> 
 <fieldset><h4>More Information:</h4> 
  This error means that the file or directory does not exist on the server. Create the file or directory and try the request again. 
  <p><a href="http://go.microsoft.com/fwlink/?LinkID=62293amp;amp;IIS70Error=404,0,0x80070002,7601">View more information amp;raquo;</a></p> 

 </fieldset> 
</div> 
</div> 
</body> 
</html>

1. Как насчет установки высоты, чтобы соответствовать содержимому после его добавления?

2. @JoakimM — Это не сработает, поскольку <div> меньше обычной страницы, и поэтому мне нужны полосы прокрутки.

3. Хорошо. Если у вас есть div1 для вашего контента и div2, содержащий этот div1, вы получите полосы прокрутки для div2 при настройке высоты div1 🙂

Ответ №1:

укажите свой div

 overflow: scroll

вот пример:
http://jsfiddle.net/an925 /

1. Не работает. Мое содержимое действует так, как будто его даже нет, и отображается далеко за пределами <div>

2. overflow: auto сделает это так же хорошо. Auto определит, нужна ли полоса прокрутки, overflow: scroll; автоматически применит полосы прокрутки. css-tricks.com/the-css-overflow-property

Ответ №2:

Это немного странно, код кажется правильным.

Я только что создал небольшой тест, но я использовал PX и EMs вместо REMs с переполнением, установленным на auto .

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

Попробуйте display: inline; , поскольку это значение по умолчанию, если у вас есть глобальный, например, *{margin: 0; padding: 0; display: block;} у него может возникнуть проблема с этим, но я сомневаюсь в этом.