Question

我在jQueryUI对话框中有一个jQueryUI自动完成。对话框具有给定的高度（即200px），因此自动填充的高度必须小于对话框的高度，以便显示滚动条。我通过将100px高度硬编码到自动完成功能来实现它。而不是硬编码这个高度，我怎样才能使高度取决于父亲的身高？

http://jsbin.com/xunazowiqa/1/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function() {
                var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];

                $("#open").click(function() {$("#dialog").dialog("open");});
                $('#dialog').dialog({
                    autoOpen    : false,
                    resizable   : false,
                    height      : 200,
                    width       : 400, 
                    modal       : true,
                    open        : function() {
                        console.log(this,$(this));
                        $(this).find('input').val('')
                        .autocomplete({source: availableTags})
                        .parent().next('ul.ui-autocomplete')
                        .attr('style', 'max-height: 100px; overflow-y: auto; overflow-x: hidden;')
                    }
                });
            });
        </script>
    </head>

    <body>
        <button id="open">Open</button>
        <div id="dialog" title="DIALOG TITLE"><input></div>
    </body> 
</html>

Answer 1

你可以这样尝试

console.log(this,$(this));
var height = $(this).height();
console.log(height);
$(this).find('input').val('')
.autocomplete({source: availableTags})
.parent().next('ul.ui-autocomplete')
.attr('style', 'max-height: 100px; overflow-y: auto; overflow-x: hidden;')

你可以把这段代码放在open函数中在此代码中，您可以获得对话框的高度，然后您可以自己管理。

Answer 2

要在jquery中修改高度，请使用.height() function。

使用此功能，您可以读取任何元素的高度，并根据您对另一个元素的任何计算进行设置。

Answer 3

height css属性有一个属性 inherit 从其父元素继承此属性。

使jQuery UI自动完成高度取决于父级

3 个答案: