簡體   English   中英

我該如何做 <div> 包含HTML響應可能是什么?

[英]How can I make a <div> contain HTML response that could be anything?

我的應用程序具有一個屏幕,可用於檢查從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>的內容

如何使<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>&nbsp;&nbsp;&nbsp;IIS Web Core</td></tr> 
    <tr><th>Notification</th><td>&nbsp;&nbsp;&nbsp;MapRequestHandler</td></tr> 
    <tr class="alt"><th>Handler</th><td>&nbsp;&nbsp;&nbsp;StaticFile</td></tr> 
    <tr><th>Error Code</th><td>&nbsp;&nbsp;&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>&nbsp;&nbsp;&nbsp;http://127.0.0.1:17315/api/test</td></tr> 
    <tr><th>Physical Path</th><td>&nbsp;&nbsp;&nbsp;C:\K\WebRole1\api\test</td></tr> 
    <tr class="alt"><th>Logon Method</th><td>&nbsp;&nbsp;&nbsp;Anonymous</td></tr> 
    <tr><th>Logon User</th><td>&nbsp;&nbsp;&nbsp;Anonymous</td></tr> 
    <tr class="alt"><th>Request Tracing Directory</th><td>&nbsp;&nbsp;&nbsp;C:\Users\Richard\AppData\Local\dftmp\Resources\c841e747-89a0-46a2-87fc-450674d1b67b\directory\DiagnosticStore\FailedReqLogFiles\Web\DEPLOYMENT23(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=62293&amp;IIS70Error=404,0,0x80070002,7601">View more information &raquo;</a></p> 

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

給你的div

overflow: scroll

這是一個示例: http : //jsfiddle.net/an925/

有點奇怪,代碼似乎正確。

我剛剛創建了一個小測試,但是我使用了PX和EM而不是將溢出設置為auto的REM。

我有點不確定,因為我在工作,所以不能真正玩得太多。 一個小測試將是確保將樣式應用於元素。 更改元素的背景顏色,然后查看它是否發生了變化。

嘗試display: inline; 由於這是默認值,因此如果您具有*{margin: 0; padding: 0; display: block;} *{margin: 0; padding: 0; display: block;} *{margin: 0; padding: 0; display: block;}可能與此有關,但我對此表示懷疑。


暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM