Question

有人可以解释为什么，尽管我的主要内容和主要内容固定宽度的高度设置为100％，为什么主要内容固定宽度内的子项目存在于其高度之外？不应该设置高度：100％会导致它相对于放在里面的物品增长吗？

private static void createStadt(RadioButton button, String name) {
    button.setUserData(new Stadt(name, button.getLayoutX(), button.getLayoutY()));
}

private final List<Stadt> selectedCities = new ArrayList<>();

public void initialize(URL location, ResourceBundle resources) {
    createStadt(zug, "Zug");
    createStadt(zurich, "Zurich");
    ...

    allRadioButtons = new RadioButton[] {
            zug, zurich, schaffhausen, stgallen, aarau, chur, glarus, frauenfeld, schwyz, luzern, sarnen, bellinzona, sion, liestal, bern, delemont, solothurn, fribourg, neuchatel, lausanne, genf, altdorf, stans, basel, appenzell, herisau
    };
}

@FXML
private void citySelectionAction(ActionEvent event) {
    RadioButton source = (RadioButton) event.getSource();
    Stadt city = (Stadt) source.getUserData();

    if (source.isSelected()) {
        selectedCities.add(city);
    } else {
        selectedCities.remove(city);
    }
}

private RadioButton[] allRadioButtons;

@FXML
private void clearPane(ActionEvent event) {
    anchorPane.getChildren().removeAll(lines);
    lines.clear();
    selectedCities.clear();

    for (RadioButton button : allRadioButtons) {
        button.setSelected(false);
    }
}

@FXML
private void handleButtonAction(ActionEvent event) {
    final int size = selectedCities.size();
    switch (size) {
        case 1:
            /*alert.setTitle("Warnung");
            alert.setHeaderText("Schau, eine Warnung wurde herausgegeben!");
            alert.setContentText("Du hast nur eine Stadt ausgewÃ¤hlt. Um das Programm korrekt laufen zu lassen, muss man mehr als eine Stadt auswÃ¤hlen.");

            alert.showAndWait();
            System.err.println("Nur eine Stadt ausgewÃ¤hlt");*/
        case 0:
        break;
        default:
            Stadt c1 = selectedCities.get(0);
            Stadt c2 = selectedCities.get(size-1);
            lines.add(new Line(c1.getxCoord() + 9, c1.getyCoord() + 9, c2.getxCoord() + 9, c2.getyCoord() + 9));
            // intentional fallthrough
        case 2:
            Stadt currentCity = selectedCities.get(0);
            for(int i = 1; i < size; i++) {
                 Stadt nextCity = selectedCities.get(i);
                 lines.add(new Line(currentCity.getxCoord() + 9, currentCity.getyCoord() + 9, nextCity.getxCoord() + 9, nextCity.getyCoord() + 9));
                 currentCity  = nextCity;
            }

    }

    selectedCities.clear();

    // start adding lines starting at the end until a line is found that is
    // already added to the anchorPane
    Line line;
    for (int i = lines.size()-1; (i >= 0) && ((line = lines.get(i)).getParent() == null); i--) {
        anchorPane.getChildren().add(line);
    }

}

...
<RadioButton fx:id="zug" onAction="#citySelectionAction" layoutX="659.0" layoutY="228.0" mnemonicParsing="false" prefHeight="0.0" prefWidth="0.0" style="-fx-color: red;" />
<RadioButton fx:id="zurich" onAction="#citySelectionAction" layoutX="659.0" layoutY="166.0" mnemonicParsing="false" prefHeight="0.0" prefWidth="0.0" style="-fx-color: red;" />
...

Answer 1

这是因为您的“内容”项目都是浮动的，因此浏览器显示“mainContent-fixedWidth”容器中没有任何内容。

将CSS规则overflow: auto添加到mainContent-fixedWidth元素中，这应解决它。

Answer 2

这是你想要的吗？如果您不熟悉CSS，那么这里有不同的棘手事项：

高度％仅在层次结构链也以％定义时才有效，通常设置＆＃39; html＆＃39;和＆＃39;身体＆＃39;事情就像这里一样100％高，有时它更复杂，你需要包装或JS
浮动项目就高度而言是从内容流中走出来的，如果我错了，请纠正我，他们＆＃34;留在文本行中＆＃34;他们在。为了迫使容器适应，tou必须做一个＆＃34; clearfix＆＃34;。它包括添加一个div，类似于我在浮动元素列表末尾所做的类。这个clearfix类可能已经过时，根据你想要向后支持的程度，有许多不同的版本。
＆＃39;高度：100％＆＃39;不适应内容，但最小高度确实如此。坏消息是，向后支持并不是很好。要获得完美的支持，你可能需要使用JS（通过设置高度取决于窗口高度，当它更小时，让更大的内容适应内容）

＆＃13;

*
{
    margin: 0;
    padding: 0;
}

html, body
{
    height: 100%;
}

.clear{
    clear: both;
    height: 0; overflow: hidden; /* Precaution pour IE 7 */
}

p
{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    line-height: 19px;
    color: #1e4164;
    margin: 10px 10px;
}

.content-section-heading
{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 12px;
    line-height: 12px;
    color: #5c5c5c;
    margin: 10px 10px;
    font-weight: 600;
}

h1
{
    font-size: 36px;
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 122px;
    color: #1e4164;
    font-weight: 800;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 70px;
}

header
{
    height: 127px;
    width: 100%;
    background-color: #569ABD;
    box-shadow: rgba(80, 80, 80, 0.7) 1px 1px 2px 0px;
    position: relative;
    z-index: 2;
    
}

#header-fixedWidth
{
    width: 1253px;
    margin: 0 auto;
}

#header-fixedWidth img
{
    margin-top: 3px;
}

#banner
{
    width: 100%;
    height: 772px;
    display: block;
}

#main-content
{
    display: block;
    width: 100%;
    min-height: 100%;
    border: 1px solid black;
    
}

#mainContent-fixedWidth
{
    width: 1253px;
    min-height: 100%;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.content
{
    height:340px;
    width: 220px;
    background-color: white;
    box-shadow: rgba(192, 192, 192, 0.8) 0px 10px 10px 0px;
    float: left;
    margin: 0px 0px 40px 30px;
}

.content #tempContentImage
{
    height: 180px;
    width: 222px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>OECTA Template</title>
        <link rel="stylesheet" href="style.css" />
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />
    </head>
    <body>
        <header>
            <div id="header-fixedWidth">
                <img src="Images/header/navigationMenu.png" alt="mainNavImage" id="mainNav" />
            </div>
        </header>
        <div id="banner">
            <img src="Images/Banner/BenefitsBanner.jpg" alt="bannerImage" id="bannerTemplate" />
        </div>
        <div id="main-content">
            <div id="mainContent-fixedWidth">
                <h1>Intranet</h1>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
                </div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="content">
                    <img src="Images/contentItems/briefNewsImage.jpg" alt="tempContentImage" id="tempContentImage" />
                    <p class="content-section-heading">Section Heading</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, obcaecati.</p>
</div>
                <div class="clear"></div>
            </div>
        </div>
    </body>
</html>

＆＃13;

内容显示在100％高度之外

2 个答案: