我正在制作一个使用 jqxListBox 来显示元素列表的小型网站。实际上，默认情况下，它不会自动调整大小以适应其容器。 我得到容器的内部高度并设置为 jqxListBox，但我不知道为什么 jqxListBox 变得比它的容器大。
这是我的代码:
var wordSelectionHeight = $("#wordSelectionArea").innerHeight();
$("#lstWords").jqxListBox({ height:wordSelectionHeight});
->wordSelectionArea是一个div，大小为500px(这个大小不固定)。 ->lstWords 是 jqxListBox。
我得到了这个结果:
滚动条仍然出现。
有人可以帮我吗？ 谢谢。
P/s:如果有人需要看我的代码，就在这里:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/general.css">
<link rel="stylesheet" type="text/css" href="css/special_box.css">
<link rel="stylesheet" type="text/css" href="lib/jqwidgets/styles/jqx.base.css">
<script type="text/javascript" src="lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="lib/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="lib/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="lib/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="lib/jqwidgets/jqxlistbox.js"></script>
</head>
<body id="htmlBody">
<div style="overflow:hidden;">
<table id="mainTable" class="main_container" border="1">
<tr>
<th width="100%" height="32px" colspan="2" align="center" valign="middle" bgcolor="#F0F0F0" scope="col">Smart Dict</th>
</tr>
<tr height="100%">
<td id="wordsArea" align="left" valign="top" style="margin:0px; padding:0px; width:15%; height:100%;">
<div id="wordInputArea" style="margin:0px; padding:0px;">
<input type="text" style="width:100%"/>
</div>
<div id="wordSelectionArea" style="height:100%; overflow:hidden;">
<div id="lstWords">
</div>
</div>
<!-- <select id="lstWords" size="5" style="padding:0px; width:100%; margin:0px; overflow:hidden;">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
-->
</td>
<td width="80%" height="100%" colspan="2" align="left" valign="top" style="margin:0px; padding:0px; overflow:hidden;">
<div style="height:100%;">
<div id="divSelectedWordTitle" style="height:50px; background-color:black; color:white; line-height:50px; padding-left:25px; font-size:25px; font-weight:bold; margin-bottom:20px;">Hello World</div>
<div id="divGeneralInfomation" style="background-color:white;">
<div id="divMeaningSectionHeader" style="display: table-cell; height:32px; line-height:32px; vertical-align:middle;">
<img src="resource/icon/arrow.png"></img>
<label style="padding-top:3px; vertical-align:top;">Meaning</label>
</div>
<div id="divMeaningSectionBody" style="height:auto;">This word has no meaning</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</body>
<script>
// Constants
const siteWidth = 1024;
const siteHeight = 768;
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> EVENT <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*
This event is fired when document has been loaded successfully.
*/
$(document).ready(function(){
// Generate a random background.
generateBackground();
var wordsList = [];
for (var i = 0; i < 100; i++){
wordsList.push("1");
}
updateListBoxSource("#lstWords", wordsList);
resizeChildrenElements();
});
function resizeChildrenElements(){
// Resize the main table by new window.
resizeMainTable();
// Resize the words area.
resizeWordsArea();
}
/*
This event is fired when window is being resized.
*/
$(window).resize(function(){
/*
var sizeInfo = "";
sizeInfo += "Width = ";
sizeInfo += $(window).width();
sizeInfo += " ";
sizeInfo += "Height = ";
sizeInfo += $(window).height();
console.log(sizeInfo);
*/
resizeChildrenElements();
});
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> FUNCTION <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
/*
Resize words area to make it fit to parent background.
*/
function resizeWordsArea(){
var wordSelectionHeight = $("#wordSelectionArea").innerHeight();
$("#lstWords").jqxListBox({ height:wordSelectionHeight});
}
/*
Generate random background each time page is loaded.
*/
function generateBackground(){
// List of background.
var backgroundImages = [];
backgroundImages.push("resource/background/1.png");
backgroundImages.push("resource/background/2.jpg");
backgroundImages.push("resource/background/3.gif");
backgroundImages.push("resource/background/4.gif");
// Generate random background from list.
var generatedBackgroundIndex = generateRandomNumber(backgroundImages.length);
$("#htmlBody").attr("background", backgroundImages[generatedBackgroundIndex]);
}
/*
Generate random number from 0 to a maximum value.
*/
function generateRandomNumber(maximumValue){
var randomNumber = Math.floor(Math.random()*maximumValue);
return randomNumber;
}
/*
Resize the main table to make it fit browser window.
*/
function resizeMainTable(){
var windowHeight = $(window).innerHeight();
var windowWidth = $(window).width();
$("#mainTable").width(windowWidth);
$("#mainTable").height(windowHeight);
}
/*
Update jqxListBox item source.
*/
function updateListBoxSource(elementId, itemSource){
try
{
$(elementId).jqxListBox({ source: itemSource,
theme:"office"});
}
catch (exceptionInfo){}
}
</script>
最佳答案
过了一会儿，我意识到我可以将 jqxListBox 的宽度和高度设置为百分比格式。
$(elementId).jqxListBox({ source: itemSource,
width:"100%",
height:"100%"});
我的问题解决了。 希望它能帮助一些人:)
关于html - jqxListBox 不适合它的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30817299/