jquery - 单击生成器按钮后如何使 div 的底部保持固定?

标签 jquery html css

这是我的代码

HTML

<head>  
<link 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" 
rel="stylesheet"  type='text/css'>  
<h1 style="text-align: center; color: red; font-family: verdana; font-
weight: bold;">WHAT CHRISTMAS MOVIE SHOULD I WATCH?</h1>
</head>
<body>
<div class="container">
<div id="generator" style="padding-top: 10px;">
<p>
<i class="fa fa-snowflake-o fa-5x spin"></i>
<i class="fa fa-gift fa-5x spin"></i>
<i class="fa fa-tree fa-5x spin"></i>

</p>

<input type="button" id="btnSearch" value="What Christmas Movie Should I 
Watch?" onclick="GetValue();" />
<p id="message"></p>
</div>
</div>
</body>

JQUERY

function GetValue()
{
var myarray= new Array("The Santa Claus","Just Friends","Home Alone", "Home 
Alone 2","Serendipity","Love Actually","Elf","Christmas Vacation","A  
Story","The Grinch","Jingle All the Way","Rudolph the Red-Nosed 
Reindeer","Ernest Saves Christmas","Frosty the Snowman","The Muppet 
Christmas Carol","The Nightmare Before Christmas","Jesus of Nazareth 
1977","Bad Santa");
var random = myarray[Math.floor(Math.random() * myarray.length)];
//alert(random);
document.getElementById("message").innerHTML=random;
}

https://codepen.io/McComb/pen/qVPOQO

点击按钮,看看div的底部如何改变盒子的形状。我该如何避免这种情况?我只希望框的底线保持固定。为此,我愿意接受不同的解决方案。也许占位符文本?

最佳答案

在生成器 div 上设置高度和最大高度:

#generator {
  height: 250px;
  max-height: 250px;
}

关于jquery - 单击生成器按钮后如何使 div 的底部保持固定?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47316871/

相关文章:

java - 如何使用 Jquery 将多个值传递给 servlet

javascript - 向下/向上滚动时导航汉堡图标反复闪烁

javascript - Phantomjs 呈现错误的快照大小

c# - 如何随着记录数的增加增加<div>标签的高度

html - 在设置像素 div 后填充 div 的其余部分

javascript - 使用 CropZoom 插件,图像不会通过 jquery 动态更改

javascript - 具有类似行为的第二个元素上的 JS 单击事件不会触发

html - 视觉对齐轮播内容和正文的 CSS 解决方案

html - 调整浏览器窗口大小时防止页脚内容移动

javascript - Jscrollpane z-index 问题