使用动态内容时调整Div的高度

时间：2016-08-04 19:16:48

标签： javascript jquery html css

我正在建立一个音乐理论课和测验网站。

我已经使用了todd moto的菜单以及来自flashbynight的javascript教程，该教程的所有者帮助我适应了。

我有一个测验，用户可以查看错误的答案。由于测验可能很长而且错误/正确的答案各不相同，我需要在测验显示此信息时更改div（和父母的）的大小。

我一直在努力寻找各种各样的选择（自动，最小高度等）并且陷入困境。如果我使div足够大以容纳从开始的信息那么窗口太长，一直有不必要的滚动条存在。我试图让这个适合移动设备和桌面设备。

相关的div是#navcontent。

的index.html：

<!DOCTYPE html>
<head>

<title>Trinity Grade 1 Music Terminology Quiz</title>
<link href="quiz.css"rel="stylesheet"type="text/css"/>
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="jquery.js"></script>
<script src="controller.js"></script>

</head>
<body>

<div id="topbar">Trinity Grade 1 Terminology</div>
<div class="spacer"></div>

<div id="navContent">

<div id="game1"></div>
<div id="game2"></div>
</div>

</body>
</html>

quiz.css：

html, body{
margin: 15;
padding: 0;
background:green;
font-family: Arial, Helvetica, sans-serif;
}

#navContent{
margin:auto;    
width:800px;
height:260px;
position:relative;
overflow:hidden;
}

#game1{
margin:auto;
 width:800px;
height:400px;
right:0px;
position:absolute;
}

#game2{
margin:auto;    
 width:800px;
height:400px;
right:-800px;
position:absolute;
} 

.questionText{
 font-size:18px;
color:#FFF;
}

 .option{width:400px;
 height:30px;
 margin-bottom:15px;
 margin-top:15px;
 font-size:18px;
 color:#FFF; 
padding:2px;
padding-left:10px;
border: 2px solid white;
cursor:pointer;
}

#topbar{
height:50px;
margin:auto;
margin-top:20px;
color:#FFF;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
width:810px;
border-bottom:solid white 1px;
overflow:hidden;
}

 .spacer{
height:20px;
}

.feedback1{
 width:150px;
padding:5px;
padding-left:0px;
font-size:18px;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-align:left;


.feedback2{
width:150px;
padding:5px;
padding-left:0px;
font-size:18px;
color:#FFF;
 font-family:Arial, Helvetica, sans-serif;
 text-align:left;
}

.quizreturn{
width:150px;
color:#FFF;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
text-decoration: none;
border:1px;
}

 .quizreturn:hover{color:#AAA; cursor:pointer;}

.button{
width:240px;
height:30px;
margin-bottom:15px;
font-size:18px;
color:#FFF; 
padding:2px;
padding-left:10px;
border: 2px solid white;
cursor:pointer;
text-decoration: none;
}

.button:hover{color:#AAA; cursor:pointer;}

#answerKey{color:#fff;}

@media screen and (max-width:810px) {
#topbar{margin-left:1%;margin-right:1%; width:100%;}
#navContent{margin:1%;  width:100%;}
#game1{margin:1%;   width:98%;}
#game2{margin:1%;   width:98%;}
}

 @media screen and (max-width:460px) {
.option{width:90%;}
}

controller.js：

$(document).ready(function () {

var questionNumber=0;
var questionBank=new Array();
var stage="#game1";
var stage2=new Object;
var questionLock=false;
var numberOfQuestions;
var score=0;
var wrongAnswerTracker=new Array();


        $.getJSON('activity.json', function(data) {

        for(i=0;i<data.quizlist.length;i++){ 
            questionBank[i]=new Array;
            questionBank[i][0]=data.quizlist[i].question;
            questionBank[i][1]=data.quizlist[i].option1;
            questionBank[i][2]=data.quizlist[i].option2;
            questionBank[i][3]=data.quizlist[i].option3;
            wrongAnswerTracker[i]=0;
        }
         numberOfQuestions=questionBank.length; 

        scrambleDatabase();
        displayQuestion();
        addHoverClass();
        })//gtjson


 function scrambleDatabase(){
    for(i=0;i<50;i++){ 
    var rnd1=Math.floor(Math.random()*questionBank.length);
    var rnd2=Math.floor(Math.random()*questionBank.length);

    var temp=questionBank[rnd1];
    questionBank[rnd1]=questionBank[rnd2];
    questionBank[rnd2]=temp;

    }//i

 }//scdb



function displayQuestion(){
 var rnd=Math.random()*3;
rnd=Math.ceil(rnd);
 var q1;
 var q2;
 var q3;

if(rnd==1){q1=questionBank[questionNumber]    [1];q2=questionBank[questionNumber][2];q3=questionBank[questionNumber][3];}
if(rnd==2){q2=questionBank[questionNumber]    [1];q3=questionBank[questionNumber][2];q1=questionBank[questionNumber][3];}
if(rnd==3){q3=questionBank[questionNumber]    [1];q1=questionBank[questionNumber][2];q2=questionBank[questionNumber][3];}

$(stage).append('<div id="qt"     class="questionText">'+questionBank[questionNumber][0]+'</div><div id="1"     class="option">'+q1+'</div><div id="2" class="option">'+q2+'</div><div id="3"     class="option">'+q3+'</div>');



 $('.option').on("click tap",function(){
  if(questionLock==false){questionLock=true;    
  //Correct answer
  if(this.id==rnd){
   $(stage).append('<div class="feedback1">Correct</div>');
   score++;
    wrongAnswerTracker[questionNumber]=0;
   }
  //wrong answer    
  if(this.id!=rnd){
   $(stage).append('<div class="feedback2">Incorrect</div>');
   wrongAnswerTracker[questionNumber]=1;
  }
  setTimeout(function(){changeQuestion()},1000);
 }})
}//display question



    function changeQuestion(){

        questionNumber++;

    if(stage=="#game1"){stage2="#game1";stage="#game2";}
        else{stage2="#game2";stage="#game1";}

    if(questionNumber<numberOfQuestions)    {displayQuestion();}else{displayFinalSlide();}

     $(stage2).animate({"right": "+=800px"},"slow", function() {$(stage2).css('right','-800px');$(stage2).empty();});
     $(stage).animate({"right": "+=800px"},"slow", function() {questionLock=false;addHoverClass();}); 
}//change question


     function displayFinalSlide(){

        $(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'<br><br></div>');

        $(stage).append('<div id="b2"><a class="quizreturn">&#x21A9 Review wrong answers</a></div><br><div><a class="quizreturn" href="index.html">&#x21A9     Have another go</a></div>');

        $('#b2').on("click tap",function(){displayWrongAnswers();});

    }//display final slide

    function displayWrongAnswers(){
        $(stage).empty();
        for(i=0;i<numberOfQuestions;i++){
            if(wrongAnswerTracker[i]==1){
            $(stage).append("<div id='answerKey'>Q: "+questionBank[i][0]+"</br>A: "+questionBank[i][1]+"</br></div></br></br><div>");
            }
        }//if
        $(stage).append('<div><a class="quizreturn" href="index.html">&#x21A9 Have another go</a></div>');

    }//display wrong answers

    function addHoverClass(){

        $('#1').on("mouseover",function(){$('#1').css("color","#AAA");});
         $('#1').on("mouseout",function(){$('#1').css("color","#FFF");});
        $('#2').on("mouseover",function(){$('#2').css("color","#AAA");});
         $('#2').on("mouseout",function(){$('#2').css("color","#FFF");});
         $('#3').on("mouseover",function(){$('#3').css("color","#AAA");});
         $('#3').on("mouseout",function(){$('#3').css("color","#FFF");});


         $('#1').on("mouseover",function(){$('#1').css("border-color","#AAA");});
         $('#1').on("mouseout",function(){$('#1').css("border-color","#FFF");});
         $('#2').on("mouseover",function(){$('#2').css("border-color","#AAA");});
         $('#2').on("mouseout",function(){$('#2').css("border-color","#FFF");});
         $('#3').on("mouseover",function(){$('#3').css("border-color","#AAA");});
         $('#3').on("mouseout",function(){$('#3').css("border-color","#FFF");});


    }



    });//doc ready

activity.json：

{"quizlist":[

  {
  "question":"'pianissimo (pp)' means:",
  "option1":"very soft",
  "option2":"soft",
  "option3":"moderately soft"
  },
  {
  "question":"'piano (p)' means:",
  "option1":"soft",
  "option2":"moderately soft",
  "option3":"very soft"
  },
  {
  "question":"'mezzo piano (mp)' means:",
  "option1":"moderately soft",
  "option2":"soft",
  "option3":"very soft"
  },
  {
  "question":"'mezzo forte (mf)' means:",
  "option1":"moderately loud",
  "option2":"loud",
  "option3":"very loud"
  },
  {
  "question":"'forte (f)' means:",
  "option1":"loud",
  "option2":"moderately loud",
  "option3":"very loud"
  },
  {
  "question":"'fortissimo (ff)' means:",
  "option1":"very loud",
  "option2":"moderately loud",
  "option3":"loud"
  },
  {
  "question":"'diminuendo (dim.)' means:",
  "option1":"getting gradually softer",
  "option2":"getting gradually louder",
  "option3":"getting gradually slower"
  },
  {
  "question":"'crescendo (cresc.)' means:",
  "option1":"getting gradually louder",
  "option2":"getting gradually softer",
  "option3":"getting gradually slower"
  },
  {
  "question":"the direction to play very softly is:",
  "option1":"pp (pianissimo)",
  "option2":"p (piano)",
  "option3":"mp (mezzo piano)"
  },
  {
  "question":"the direction to play softly is:",
  "option1":"p (piano)",
  "option2":"pp (pianissimo)",
  "option3":"mp (mezzo piano)"
  },
  {
  "question":"the direction to play moderately softly is:",
  "option1":"mp (mezzo piano)",
  "option2":"pp (pianissimo)",
  "option3":"p (piano)"
  },
  {
  "question":"the direction to play moderately loud is:",
  "option1":"mf (mezzo forte)",
  "option2":"ff (fortissimo)",
  "option3":"f (forte)"
  },
  {
  "question":"the direction to play loud is:",
  "option1":"f (forte)",
  "option2":"ff (fortissimo)",
  "option3":"mf (mezzo forte)"
  },
  {
  "question":"the direction to play very loud is:",
  "option1":"ff (fortissimo)",
  "option2":"f (forte)",
  "option3":"mf (mezzo forte)"
  },
        {
  "question":"'andante' means:",
  "option1":"at a walking pace",
  "option2":"slow",
  "option3":"fast"
  },
  {
  "question":"'rit. (ritenuto)' means: ",
  "option1":"getting slower",
  "option2":"getting quieter",
  "option3":"getting faster"
  },
  {
  "question":"select the 'sharp' symbol:",
  "option1":"&#9839",
  "option2":"&#9838",
  "option3":"&#9837"
  },
  {
  "question":"select the 'flat' symbol:",
  "option1":"&#9837",
  "option2":"&#9839",
  "option3":"&#9838"
  },
  {
  "question":"select the 'natural' symbol:",
  "option1":"&#9838",
  "option2":"&#9839",
  "option3":"&#9837"
  },
  {
  "question":"'moderato' means:",
  "option1":"at a moderate pace",
  "option2":"moderately loud",
  "option3":"getting slower"
  },
  {
  "question":"'allegro' means:",
  "option1":"fast",
  "option2":"slow",
  "option3":"at a walking pace"
  },
  {
  "question":"notes played short and detached are played:",
  "option1":"staccato",
  "option2":"andante",
  "option3":"legato"
  },
  {
  "question":"accented notes have the following symbol:",
  "option1":">",
  "option2":".",
  "option3":"&#9900"
  },
  {
  "question":"notes played smoothly are played:",
  "option1":"legato",
  "option2":"diminuendo",
  "option3":"staccato"
  }, 
  {
  "question":"changes in speed are related to:",
  "option1":"tempo",
  "option2":"dynamics",
  "option3":"accents"
  },
  {
  "question":"changes in volume or loudness are related to:",
  "option1":"dynamics",
  "option2":"tempo",
  "option3":"accents"
  },     
  {
  "question":"tempo markings indicate:",
  "option1":"changes in speed",
  "option2":"changes in volume or loudness",
  "option3":"changes in note lengths"
  },
  {
  "question":"dynamic markings indicate:",
  "option1":"changes in volume or loudness",
  "option2":"changes in speed",
  "option3":"changes in note lengths"
  },
  {
  "question":"the direction to gradually play louder is:",
  "option1":"cresc. (crescendo)",
  "option2":"dim. (diminuendo)",
  "option3":"ff (fortissimo)"
  },
  {
  "question":"the direction to gradually play softer is:",
  "option1":"dim. (diminuendo)",
  "option2":"cresc. (crescendo)",
  "option3":"mp (mezzo piano)"
  }
  ]
  }

可以在以下网址找到一个例子：

www.musictheorytutorials.com/trinitygr1quiz

由于

2 个答案:

答案 0 :(得分：1)

更改溢出：隐藏;溢出-x：隐藏;溢出-Y：汽车;当内容超出容器大小时添加滚动条。

答案 1 :(得分：0)

不确定这是否是你所追求的，但在这种情况下我使用max-height。

小提琴： https://jsfiddle.net/6b9arpn4/

要测试它，复制文本，使用p标签检查div并在其中粘贴更多内容（这将在检查工具的元素部分中完成）。你会看到白盒子会相应地调整大小。希望这有帮助！

相关问题
最新问题